在vue项目中正确使用iconfont的方法


Posted in Javascript onSeptember 28, 2018

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

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

3、下载至本地

在vue项目中正确使用iconfont的方法

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项目中正确使用iconfont的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Vue中的字符串模板的使用
May 17 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
Vue实现导航栏的显示开关控制
Nov 01 Javascript
vue项目引入字体.ttf的方法
Sep 28 #Javascript
vue打包相关细节整理(小结)
Sep 28 #Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 #Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 #Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 #Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 #Javascript
详解适配器在JavaScript中的体现
Sep 28 #Javascript
You might like
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python切图九宫格的实现方法
2019/10/10 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python 读取串口数据的示例
2020/11/09 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
开业庆典邀请函
2014/01/08 职场文书
学生出入校管理制度
2014/01/16 职场文书
班主任工作经验材料
2014/02/02 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
机关保密承诺书
2014/06/03 职场文书
大足石刻导游词
2015/02/02 职场文书
活动简报范文
2015/07/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫