在HTML中尽量使用iconfont 替代图片有很多好处,而且方便,可以设置大小、颜色 等 可以用于字体的设置。

一、使用iconfont

1、打开iconfont 官网 iconfont.cn。

2、将自己需要的图标添加到购物车。

3、选好之后,在购物车有一个添加项目。随便建一个项目,然后添加。

4、之后在我的项目 里 会有 下载到本地。

5、下载完之后解压。里面有 3 个 HTML文件,打开 里面有 使用教程(3 中引入方式)。

一般取出 .ttf/.css/.woff/.svg/.eot 这几个文件 然后放入一个文件夹,在 要使用的地方 引入 .css 文件,然后

   <!-- 引入样式文件 -->
<link rel="stylesheet" href="./css1/myicon/iconfont.css"> <!-- 使用 -->
<i class="iconfont icon-setting"></i>

页面中就可以看到图标了。

二、使用fontAwesome

下载资源,解压之后取出css 文件夹 和 fonts 文件夹 放在一个文件夹中,然后放入项目。

使用时:

引入 css 文件夹下的 .css 文件

   <!-- 引入样式文件 -->
<link rel="stylesheet" href="./fonts/FontAwesome/font-awesome.css"> <!-- 使用 -->
<i class="fa fa-car"></i>

很简单的使用,以后可以解放大部分通用小图标了。

html 中使用 iconfont、fontAwesome的更多相关文章

  1. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  2. vue工程中使用iconfont在线CDN不生效的问题

    为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...

  3. Vue.js项目中使用iconfont冲突问题解决

    在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...

  4. 如何在微信小程序中使用iconfont

    开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...

  5. vue项目中引入iconfont

    背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

  6. 在react-native项目中使用iconfont自定义图标库(android)

    1. 安装react-native-vector-icons yarn add react-native-vector-icons react-native link 如果没有关联成功的话,可以参考官 ...

  7. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

  8. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  9. 在 iOS 中使用 iconfont

    如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例:   Step 1: 导入字体 ...

随机推荐

  1. 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action

    本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...

  2. JAVA常用设计模式(一、单例模式、工厂模式)

    JAVA设计模式之单例模式 import java.util.HashMap; import java.util.Map; /** * 设计模式之单例模式 * 单例模式(Singleton Patte ...

  3. Linux下,用命令进行 日志分割、日志合并

    指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file

  4. EasyUI学习总结(一)——EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1

  5. MySQL8.0 关闭二进制日志

    Binary logging is enabled by default (the log_bin system variable is set to ON). The exception is if ...

  6. Inotify机制的简单应用

    编程之路刚刚开始,错误难免,希望大家能够指出. 一.Inotify机制 1.简单介绍inotify:Inotify可用于检测单个文件,也可以检测整个目录.当检测的对象是一个目录的时候,目录本身和目录里 ...

  7. 同一个windows server 部署多个tomcat

    只需要修改tomcat目录下conf下的server.xml文件即可,修改地方有三个,把下面这几个端口修改了为不同的端口即可,例如我把这几个端口统一减1了 <Server port=" ...

  8. 关于动态内存malloc和realloc

    1.malloc   1.申请的内存长度可以运行时决定,单位是字节  2.申请的内存为连续的内存空间  3.返回的地址可以根据实际需要强转成对应的类型  4.动态申请内存的生命周期是整个程序,除非手动 ...

  9. asp.net core 2.0 后台定时自动执行任务

    自己写一个类继承BackgroundService internal class RefreshService : BackgroundService { protected override asy ...

  10. Qt配置cmake;运行带参数的程序

    配置cmake编译器,步骤如下: 步骤1:  Qt下新建一个project. 步骤2:  在该project目录下创建一个CMakeLists.txt文件,并按规范编写该文件. Tip: projec ...