Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使用它(点击查看)。本文接着介绍,如何在 Vue 项目中使用 Font Awesome。
一、准备工作
1,安装基础依赖
进入 Vue 项目文件夹,执行如下命令安装基础依赖库。
1 2 |
|
2,安装样式依赖
Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式(日常使用完全足够),执行如下命令安装。
1 2 3 |
|
3,修改 src/main.js
添加如下代码引入并配置 Font Awesome,之后我们就可以使用它了。
1 2 3 4 5 6 7 8 9 10 11 12 |
二、样式介绍(1)上面提到 Font Awosome 为我们提供了三种免费的样式,使用时分别对应不同的前缀。
(2)它们提供的所有图标可以进入官方的图标搜索页进行查看:
三、基本用法1,显示图标(1)我们使用 font-awesome-icon 标签来显示图标,icon 属性中可以设置样式前缀、以及图标名字。
(2)如果是 solid 样式(前缀为:fas),则前缀可以省略。比如上面第一个图标等效下面写法:
2,设置图标大小默认情况下图标和当前文字的大小是一样的。我们可以通过 size 属性在此基础上作调整,该属性支持多种类型的设置方式。
3,固定宽度图标使用 fixed-width 可以固定图标宽度。
4,旋转图标
5,翻转图标
6,旋转动画效果(1)添加 spin 属性可以让图标不停地顺时针旋转。
(2)添加 pulse 属性同样可以让图标旋转,但它不像 spin 那样是均匀地变化角度,而是 0 度、45 度、90 度...这样跳跃地变化。
7,图标居左、居右有时我们需要让图标一直在最左侧或最右侧(在做文字围绕图标效果时会用到)。默认情况下,当图标文字共存时的显示效果如下:
(1)加上 pull="left" 后的效果:
(2)加上 pull="right" 后的效果:
8,给图标加上边框(border)
四、进阶用法1,变形、自由变换(Transforms)(1)比如下面样例将第二个图标缩小 6,并向左移动 4:
(2)下面样例将第二个图标顺时针旋转 42 度:
2,遮罩
3,多个图标的组合使用
4,图标与文字的组合使用
5,动态改变图标(图标的绑定)
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2104.html |
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2104.html
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)相关推荐
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- vue快速修改数组的某个值_详解vue组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
- vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
- vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分 ...
- 上传服务器后字体文件丢失,详解Vue+elementUI build打包部署后字体图标丢失问题...
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- 在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
- Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
- layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法 发布于 2020-8-10| 复制链接 摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
最新文章
- Discuz NT 架构剖析之Config机制
- Atlassian发布Kubernetes节点自动化扩展工具Escalator
- windows环境下redis.conf配置文件
- 五、MDT 2013 Update 1批量部署-WINDOWS 7样本机镜像部署
- 算法,求1亿个数的中位数
- 实现android应用程序自动化测试的批处理脚本,简单入手移动端并发自动化测试:Appium+Robot+ 批处理脚本...
- ARMLINUX学习笔记(3)---安装交叉编译器
- 零基础带你学习MySQL—Insert语句以及注意事项(七)
- Hbase0.96 MVCC Lock 知识梳理
- 区块链100问:区块链到底能不能篡改?
- 包含农历、节气、节假日的前端日历
- Java 2.2(计算圆柱的体积)编写程序,读入圆柱体的半径和高,并使用下列公式计算圆柱体的体积:
- SharePoint Designer 2010 简介 - SharePoint Designer - Office.com
- 为什么空集是集合的子集_空集是任何集合的子集对吗
- 为什么计算机打不开优盘,U盘打不开,且8G的U盘只报64M,为什么?
- 2020.11.30【NOIP提高B组】模拟 总结
- 华为是ICT人才培养的“黑土地”,谁又是浇水人呢?
- python Matplotlib 控制x轴和y轴都为整数
- (93)FPGA面试题-什么是关键路径,怎么处理关键路径?
- 2d有限元计算机仿真,热轧法制造齿轮计算机仿真(本科高分毕业论文)(有限元)研究报告.doc...
热门文章
- 51单片机—独立按键的控制
- LeetCode(加一)
- 基于matlab的磁悬浮控制系统,基于MATLAB的磁悬浮控制系统设计课件.ppt
- IMU/光电鼠标/轮式编码器的多传感器融合(非线性卡尔曼滤波)
- 四大Hybrid App移动开发平台对比
- Operation category READ is not supported in state standby. Visit https://s.apache.org/sbnn-error
- C8051F340串口通信程序(UART0)
- DDD概念复杂难懂,实际落地如何设计代码实现模型?
- 怎么对人像抠图 在线PS怎么处理图片
- 擦亮双眼,走出精明网贷投资的第一步