vue(18)：在vue项目中使用iconfont图标、使用bootstrap图标

使用iconfont图标

iconfont官网

使用：

• 选择一种图标库
• 将心仪的图标加入购物车
• 选择完毕点击右上角的购物车图标
• 新建或选择一个项目

• 下载到本地（内置完整demo）

vue中引入：

• 将下载下来的东西解压放到项目目录，你可以建立一个lib文件夹（个人习惯）
• 如果是用symbol彩色图标，直接在对应的组件import对应路径即可，依赖 iconfont.js，不依赖 iconfont.css
• 原始图标依赖 iconfont.css，推荐在main.js中加载

font-class引用方式
在main.js中加载css

import './iconfont/iconfont.css'

挑选相应图标并获取类名，应用于页面
必须是iconfont+类名的方式

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

类名的获取：在之前的图标页复制类名（使用什么方式加载，就复制哪一个类名）

运行效果：

其它引用方式

使用bootstrap图标

Bootstrap官网

下载：不要下载4.0可能会不兼容

npm install bootstrap@3

导入样式

//导入bootstrap
import 'bootstrap/dist/css/bootstrap.css'

选择样式，并复制样式名

<h1>这是app组件<span class="glyphicon glyphicon-pencil"> Edit</span></h1>