Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使用它(点击查看)。本文接着介绍,如何在 Vue 项目中使用 Font Awesome。
一、准备工作
1,安装基础依赖
进入 Vue 项目文件夹,执行如下命令安装基础依赖库。
1 2 |
npm i --save @fortawesome /fontawesome-svg-core npm i --save @fortawesome /vue-fontawesome
|
2,安装样式依赖
Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式(日常使用完全足够),执行如下命令安装。
1 2 3 | npm i --save @fortawesome /free-solid-svg-icons npm i --save @fortawesome /free-regular-svg-icons npm i --save @fortawesome /free-brands-svg-icons |
3,修改 src/main.js
添加如下代码引入并配置 Font Awesome,之后我们就可以使用它了。
1 2 3 4 5 6 7 8 9 10 11 12 | import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' library.add(fas, far, fab) Vue.component( 'font-awesome-icon' , FontAwesomeIcon) Vue.component( 'font-awesome-layers' , FontAwesomeLayers) Vue.component( 'font-awesome-layers-text' , FontAwesomeLayersText) 二、样式介绍 (1)上面提到 Font Awosome 为我们提供了三种免费的样式,使用时分别对应不同的前缀。
![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/ab58814e56b1cdb9ecf50601d65a3674.png)
![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/dbe820650e4d9e04d68aee1693f0e0e0.png)
![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/5902064160c7650f0cf6d44510b776d6.png) (2)它们提供的所有图标可以进入官方的图标搜索页进行查看:
三、基本用法 1,显示图标 (1)我们使用 font-awesome-icon 标签来显示图标,icon 属性中可以设置样式前缀、以及图标名字。 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/795cf3578a7fbcd8e5e8afe4c83ce379.png)
1 2 3 | < font-awesome-icon :icon = "['fas', 'square']" /> < font-awesome-icon :icon = "['far', 'square']" /> < font-awesome-icon :icon = "['fab', 'accessible-icon']" /> |
(2)如果是 solid 样式(前缀为:fas),则前缀可以省略。比如上面第一个图标等效下面写法:
1 | < font-awesome-icon icon = "square" /> | 2,设置图标大小 默认情况下图标和当前文字的大小是一样的。我们可以通过 size 属性在此基础上作调整,该属性支持多种类型的设置方式。 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/639ed5f057d631318afffd31a3014f4c.png)
1 2 3 4 | < font-awesome-icon icon = "chess-knight" /> < font-awesome-icon icon = "chess-knight" size = "xs" /> < font-awesome-icon icon = "chess-knight" size = "lg" /> < font-awesome-icon icon = "chess-knight" size = "2x" /> | 3,固定宽度图标 使用 fixed-width 可以固定图标宽度。 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/0bc4651b2af92c46ff2cb1a05f936872.png)
1 2 3 | < font-awesome-icon icon = "home" fixed-width /> home < br > < font-awesome-icon icon = "child" fixed-width /> help < br > < font-awesome-icon icon = "cog" fixed-width /> settings < br > |
4,旋转图标 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/a7bec7dffedc55f2dd9fad74bf49eb11.png)
1 2 3 4 | < font-awesome-icon icon = "chess-knight" rotation = "0" /> < font-awesome-icon icon = "chess-knight" rotation = "90" /> < font-awesome-icon icon = "chess-knight" rotation = "180" /> < font-awesome-icon icon = "chess-knight" rotation = "270" /> |
5,翻转图标 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/207c7b2de16e00d17e4ab8e6f3aeeaec.png)
1 2 3 4 | < font-awesome-icon icon = "chess-knight" /> < font-awesome-icon icon = "chess-knight" flip = "horizontal" /> < font-awesome-icon icon = "chess-knight" flip = "vertical" /> < font-awesome-icon icon = "chess-knight" flip = "both" /> |
6,旋转动画效果 (1)添加 spin 属性可以让图标不停地顺时针旋转。 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/6999cee3a17f63c71fd405f250aeaed2.png)
1 | < font-awesome-icon icon = "arrow-circle-down" spin /> |
(2)添加 pulse 属性同样可以让图标旋转,但它不像 spin 那样是均匀地变化角度,而是 0 度、45 度、90 度...这样跳跃地变化。
1 | < font-awesome-icon icon = "arrow-circle-down" pulse /> |
7,图标居左、居右 有时我们需要让图标一直在最左侧或最右侧(在做文字围绕图标效果时会用到)。默认情况下,当图标文字共存时的显示效果如下: ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/3c7b91a959710943941cd9edca21795a.png)
1 2 | < font-awesome-icon icon = "clipboard-list" size = "2x" /> welcome to hangge.com welcome to hangge.com |
(1)加上 pull="left" 后的效果: ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/f545bf06218cc3aed0e6612226fcacef.png)
1 2 | < font-awesome-icon icon = "clipboard-list" size = "2x" pull = "left" /> welcome to hangge.com welcome to hangge.com |
(2)加上 pull="right" 后的效果: ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/9bd586efa8d984951ff3733fef3aecaf.png)
1 2 | < font-awesome-icon icon = "clipboard-list" size = "2x" pull = "right" /> welcome to hangge.com welcome to hangge.com | 8,给图标加上边框(border) ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/89540ec750a884fcfeeb86a817237b44.png)
1 2 | < font-awesome-icon icon = "clipboard-list" size = "2x" pull = "right" border /> welcome to hangge.com welcome to hangge.com | 四、进阶用法 1,变形、自由变换(Transforms) (1)比如下面样例将第二个图标缩小 6,并向左移动 4: ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/e0976624bb9023da5823656b53fd663e.png)
1 2 3 | < font-awesome-icon icon = "clipboard-list" /> < br > < font-awesome-icon icon = "clipboard-list" transform = "shrink-6 left-4" /> |
(2)下面样例将第二个图标顺时针旋转 42 度: ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/6e510fcb34182ca56e66aa03d6f2d4db.png)
1 2 3 | < font-awesome-icon icon = "clipboard-list" /> < br > < font-awesome-icon icon = "clipboard-list" :transform = "{ rotate: 42 }" /> | 2,遮罩 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/eb81bf5f0579d80c0f7b16c12b48047b.png)
1 2 3 | < font-awesome-icon icon = "star" /> < font-awesome-icon icon = "star" mask = "circle" /> < font-awesome-icon icon = "star" mask = "square" /> |
3,多个图标的组合使用 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/0b7c9e33eeaa30cb2d4fd63c3b7c5288.png)
1 2 3 4 | < font-awesome-layers class = "fa-lg" > < font-awesome-icon icon = "circle" style = "color: green;" /> < font-awesome-icon icon = "check" transform = "shrink-6" style = "color: white;" /> </ font-awesome-layers > |
4,图标与文字的组合使用 ![原文:Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)](https://i-blog.csdnimg.cn/blog_migrate/5bd76b8e924480f4696af0eeab47842d.png)
1 2 3 4 | < font-awesome-layers full-width class = "fa-4x" > < font-awesome-icon icon = "star" /> < font-awesome-layers-text transform = "down-1 right-1 shrink-14" value = "hangge" style = "color:white" /> </ font-awesome-layers > |
5,动态改变图标(图标的绑定)
1 2 3 4 5 6 7 8 9 10 11 12 13 | < template > < font-awesome-icon :icon = "icon" /> </ template > < script > export default { computed: { icon() { return ['fas', 'coffee'] } } } </ script > |
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2104.html |
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2104.html