Vue 第三方字体图标引入 Font Awesome的方法


Posted in Javascript onSeptember 28, 2018

Font Awesome

用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯。

Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/

npm 安装 font-awesome

npm install font-awesome --save-dev1

font-awesome引入

在 mani.js 文件中引入 font-awesome

import 'font-awesome/scss/font-awesome.scss'1

然后在组件中使用即可实现:

<span class="fa fa-camera-retro fa-lg"></span>

以上这篇Vue 第三方字体图标引入 Font Awesome的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
JS数组的常用10种方法详解
May 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 #Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 #Javascript
详解适配器在JavaScript中的体现
Sep 28 #Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 #Javascript
Vue父子组件之间的通信实例详解
Sep 28 #Javascript
vue引入axios同源跨域问题
Sep 27 #Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 #Javascript
You might like
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
学习和使用python的13个理由
2019/07/30 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
学生档案自我鉴定
2013/10/07 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
酒店总经理助理职责
2014/02/12 职场文书
建筑结构施工求职信
2014/07/11 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript