iconfont font-awesom图标库使用

图标库 font-awesome 简易用法：

 安装：npm install font-awesome --save

 引入：在主入口函数内引入import 'font-awesome/css/font-awesome.css'

 使用：用i标签<i class="fa fa-search"></i>

可能遇到的问题：部署后图标消失，解决方法点这里

font-awesome 5 复杂用法：

点这里

需要注意的有，默认只引入了一个user-secret图标，如果需要引入其他图标，或者整个引入一类图标，需再次引入

解决方案

方案一：每次按需引入，只添加当前页面需要使用的图标

import {faUserSecret,faPlay} from '@fortawesome/free-solid-svg-icons'library.add(faUserSecret,faPlay)使用：<font-awesome-icon icon="user-secret">

方案二：一次性引入整个图标库，后面想用哪个用哪个，不用反复的去添加注册

import {fas} from '@fortawesome/free-solid-svg-icons'ibrary.add(fas)使用：<font-awesome-icon icon="user-secret" /><font-awesome-icon icon="play" />

Iconfont-阿里巴巴矢量图标库的使用

1、在官网选择图标。加入项目。下载到本地。

2、将字体文件（iconfont文件名的所有文件，js后缀的可以不要）复制到项目文件夹中

3、在入口文件main.js中引入：import ‘./assets/styles/iconfont/iconfont.css’;（根据实际项目路径填写）

4、三种引用方式，可在下载的文件demo中查看。

第一种：图标代码

<span class="iconfont">&#x33;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

第二种：图标类名

<span class="iconfont icon-xxx"></span>

"iconfont"解释同第一种，icon-xxx为图标的类名。

第三种：Symbol 引用，引用方式可看demo，这里不做解释

Tips：如果你把iconfont.css文件单独放到其他文件夹下了。希望添加图标，下载了新的文件，那需要把.css文件的base64编码url需要更新成新下载的css文件的url，另外的字体文件直接替换即可。

如果觉得《iconfont font-awesom图标库使用》对你有帮助，请点赞、收藏，并留下你的观点哦！