vue(18):在vue项目中使用iconfont图标、使用bootstrap图标
使用iconfont图标iconfont官网使用:选择一种图标库将心仪的图标加入购物车选择完毕点击右上角的购物车图标新建或选择一个项目下载到本地(内置完整demo)vue中引入:将下载下来的东西解压放到项目目录,你可以建立一个lib文件夹(个人习惯)如果是用symbol彩色图标,直接在对应的组件import对应路径即可,依赖 iconfont.js,不依赖 iconfont.css原始图标依赖 i
·
使用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图标
下载:不要下载4.0可能会不兼容
npm install bootstrap@3
导入样式
//导入bootstrap
import 'bootstrap/dist/css/bootstrap.css'
选择样式,并复制样式名
<h1>这是app组件<span class="glyphicon glyphicon-pencil"> Edit</span></h1>
更多推荐
已为社区贡献19条内容
所有评论(0)