vue使用最新版font-awesome字体图标库(内附花式玩法)
安装
安装基础依赖:
进入 Vue 项目文件夹,执行如下命令安装基础依赖库。
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/vue-fontawesome
安装样式依赖
Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式(日常使用完全足够)
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
如果速度太慢,就用cnpm吧
在项目的main.js中加入以下配置;
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)
样式介绍
上面提到 Font Awosome 为我们提供了三种免费的样式,使用时分别对应不同的前缀。
- solid 样式,前缀为:fas
- regular 样式,前缀为:far
- brands 样式,前缀为:fab
它们提供的所有图标可以进入官方的图标搜索页进行查看
官网
基本用法
显示图标
- 我们使用 font-awesome-icon 标签来显示图标,icon 属性中可以设置样式前缀、以及图标名字。
<font-awesome-icon :icon="['fas', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['fab', 'accessible-icon']" />
- 如果是 solid 样式(前缀为:fas),则前缀可以省略。比如上面第一个图标等效下面写法:
<font-awesome-icon icon="square" />
设置图标大小
默认情况下图标和当前文字的大小是一样的。我们可以通过 size 属性在此基础上作调整,该属性支持多种类型的设置方式。
<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" />
固定图标宽度
使用 fixed-width 可以固定图标宽度。
<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>
旋转图标
<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" />
翻转图标
<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" />
旋转动画效果
- 添加 spin 属性可以让图标不停地顺时针旋转。
<font-awesome-icon icon="arrow-circle-down" spin />
- 添加 pulse 属性同样可以让图标旋转,但它不像 spin 那样是均匀地变化角度,而是 0 度、45 度、90 度…这样跳跃地变化。
<font-awesome-icon icon="arrow-circle-down" pulse />
图标居左、居右
有时我们需要让图标一直在最左侧或最右侧(在做文字围绕图标效果时会用到)。默认情况下,当图标文字共存时的显示效果如下:
<font-awesome-icon icon="clipboard-list" size="2x"/>
welcome to hangge.com welcome to hangge.com
- 加上 pull=“left” 后的效果:
<font-awesome-icon icon="clipboard-list" size="2x" pull="left"/>
welcome to hangge.com welcome to hangge.com
- 加上 pull=“right” 后的效果:
<font-awesome-icon icon="clipboard-list" size="2x" pull="right"/>
welcome to hangge.com welcome to hangge.com
给图标加上边框(border)
<font-awesome-icon icon="clipboard-list" size="2x" pull="right" border />
welcome to hangge.com welcome to hangge.com
进阶用法
变形、自由变换(Transforms)
- 比如下面样例将第二个图标缩小 6,并向左移动 4:
<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" transform="shrink-6 left-4" />
- 下面样例将第二个图标顺时针旋转 42 度:
<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" :transform="{ rotate: 42 }" />
遮罩
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star" mask="circle" />
<font-awesome-icon icon="star" mask="square" />
多个图标的组合使用
<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>
图标与文字的组合使用
<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>
动态改变图标(图标的绑定)
<template><font-awesome-icon :icon="icon" />
</template><script>
export default {computed: {icon() {return ['fas', 'coffee']}}
}
</script>
vue使用最新版font-awesome字体图标库(内附花式玩法)相关推荐
- 在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
- Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
- 超级好用的阿里巴巴字体图标库,附教程
1.新建:fonts文件夹 2.打开阿里巴巴字体图标官方网站:https://www.iconfont.cn/collections/index?type=3 3.把自己想要的图标,加入购物车,让后下 ...
- 字体图标库(Font Awesome)的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
- Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- 上传服务器后字体文件丢失,详解Vue+elementUI build打包部署后字体图标丢失问题...
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- 本地预览 @mdi/font Material Design Icons 字体图标库
目录 知识前提 @mdi/font 字体图标库安装 本地预览 @mdi/font 知识前提 会使用 Node npm 命令安装库 @mdi/font 字体图标库安装 进入项目目录,指定淘宝镜像源安装, ...
- 【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
- 超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
最新文章
- linux下新文件权限设置之umask的理解
- Activity传递对象的方法
- 理解标准输出流方法:WriteLine和Write
- 算法:多数元素,多种解法
- UITabBarController 的配置
- Java中new function另外新建个文件的写法
- YBTOJ:最小数(欧拉函数)
- hadoop伪分布式模式_Hadoop模式介绍-独立,伪分布式,分布式
- GAN对抗生成网络原始论文理解笔记
- Django REST framework 视图
- C语言 va_start / va_end / va_arg 自定义 printf 函数 - C语言零基础入门教程
- 使用Sencha Touch加载本地Json数据
- webstorm 创建react组件_webstorm的下载以及React环境搭建
- CSDN审核机制有点迷惑,决定逐步搬迁到简书
- 安卓 电话黑名单拦截
- 【思路】2021认证杯思路、第十四届“认证杯”数学中国数学建模网络挑战赛
- 如何将HTML与win10桌面壁纸,如何解决win10桌面背景不显示
- 电费管理系统php,25175水电费管理系统
- 为什么电脑屏幕会横过来_电脑屏幕横过来了怎么办
- 合法免费下载电子书的站点整理收藏
热门文章
- JavaScript(三十九)——鼠标滚轮、滚动窗口制作
- AI Earth 地球科学云平台——用数据感知地球世界(含福利)
- 使用Web Scraper插件实现简单爬虫
- 六轴EtherCAT总线伺服涂布收卷机程序,采用六个伺服+变频器+编码器,动态测量频率
- 瓦.替代_20190505
- 东南大学计算机专业研究生复试,东南大学计算机考研复试经验
- 开源的基于springboot的智慧物业管理系统
- ap统计学需要什么计算机,AP统计学考什么
- 关于HCE——Android手机NFC模拟刷卡成果和心得(上)
- 共享网络获取树莓派ip_用优盘共享文件多不方便,简单几步用树莓派搭建个私有云盘...