Font Awesome
https://fontawesome.dashgame.com/
一、字体图标的引入方式
1、使用link标签引入
这个地址可以使用一些线上的CDN提供的文件地址;也可以把文件存到项目本地,然后使用本项目下的地址,只需要在HTML的head标签里加入下面的代码,就可以引入Font Awesome文件了
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
2、在CSS文件中引用
在CSS文件中引入的方式和第一种方式很类似,也是可以使用CDN地址,也可以使用项目本地地址。
引入的时候直接在CSS文件中按下面方式引用即可
@import '//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css';
3、以npm插件形式引入
如果是npm项目,可以直接使用npm安装font-awesome这个插件来使用
npm install font-awesome@4.7.0 --save
// main.js
import 'font-awesome/css/font-awesome.css'
二、具体使用
Font Awesome字体库被引入后,只需要在html中加入下面这样一个标签,即可显示出一个标签:
<i class="fa fa-address-book"></i>
这个标签的class里,fa是必须的,后面的fa-xxx就是用来指定显示哪个标签用的,https://fontawesome.dashgame.com/
iconfont的使用
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
1.在iconfont官网中选中自己需要的icon,点击购物车
2.点击右上角购物车按钮,点击新建项目或者加入项目
3.打开我的项目,点击下载至本地
4.解压缩下载的内容,将图中的几个文件复制出来,放到项目中
5.打开iconfont.css文件,将绝对路径改为相对路径
6.因为全局都可能用到,所以在main.js中引用
7.具体使用:class =“iconfont”,中间的编码下图方式获取
<span class="iconfont "></span>
补充:导出本地后,iconfont.css中没有base64格式
此时再重新下载,便会有base64的字体格式了