vue项目中正确使用iconfont

1、打开 iconFont官网选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件）5、在main.js中引入iconfont.css样式import './assets/iconfont/iconfont.css...

码农记录者

5806人浏览 · 2018-04-11 11:42:20

码农记录者 · 2018-04-11 11:42:20 发布

 
 1、打开  
 iconFont官网 
  选择自己喜欢的图标，并且添加购物车 

 
 2、点击购物车，添加至项目 

 
 3、下载至本地 

 
 4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 

 
 5、在main.js中引入iconfont.css样式 

 
  import './assets/iconfont/iconfont.css' 

 
 6、在在vue文件中引用
 
 <i  
 class 
 ="iconfont icon-zitigui-xianxing"></ 
 i 
 > 

  7、假如报错， 
 需要下载css-loader依赖包 

 
  npm install css-loader --save 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^