vue实战开发008:引入Font Awesome字体图标
yuyutoo 2024-10-12 01:16 8 浏览 0 评论
今天在引用图标的时候发现Element-UI中的字体图标非常有限，我数了下当前只有70个可用字体图标，很难找到合适的字体图标使用，所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用，足够我们平时使用了。
首先我们先来安装Font Awesome字体，在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖，我们要在终端输入命令：npm install font-awesome 即可安装基础依赖, Font Awesome在Vue环境中使用需要的Vue组件，所以我们接着还要继续安装，在终端输入命令：npm install vue-fontawesome
接着我们在main.js中引入Font Awesome字体样式，在头部我们添加个引用：import 'font-awesome/css/font-awesome.css'即可
接下来我们就可以使用Font Awesome字体l ,Font Awesome 被设计为用于行内元素，所以我们通常用i标签来定义，在class中可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。
具体的图标样式我们可以进入Font Awesome 中文网去查看你想要的图标，上面会提供对应的引入方式，你也可以在搜索框内用英文输入我们想搜索的内容：
Font Awesome提供了很多方便的使用技巧，比如说调整图标相对大小， 使用 fa-lg(33% 递增) , fa-2x, fa-3x, fa-4x, 或 fa-5x，我们只要在图标引用后面添加你想要的大小即可。
如果你想让图标动起来，那么可以使用 fa-spin 使任意图标旋转，还可以使用 fa-pulse 使其进行8方位旋转 ，相当的炫酷，最主要是操作简单方便又快捷，的确挺好用的。
还有很多很多其他方便的功能，有兴趣的可以自己查看官方案例 http://www.fontawesome.com.cn/examples/
相关推荐
- IntelliJ IDEA插件开发（java开发idea插件）
-
引言IntelliJIDEA是JetBrains公司开发的一款广受欢迎的集成开发环境（IDE）。它不仅支持Java等多种编程语言，还通过插件系统提供了强大的扩展能力。本分享旨在介绍如何使用Java开...
- 如何验证自己的idea或者如何产生idea?小编教你如何检索……
-
申请专利前首先要做的是检索查重，如果你的构思已经被别人申请过专利，那么就不符合专利“新颖性”的要求。因此，如果你有了idea之后如何验证自己的idea具备新颖性，或者如何产生idea呢？今天，小编带着...
- idea激活码失效了，这样解决，稳定使用!
-
最近官网封控比较严格，正式版激活码是不是又掉线了？掉线请看这里，这里有一个解决的方法，就是让工具不联网就可以继续使用激活码了。激活码本来就叫离线激活码，现在要怎么使id工具不联网？·可以打开这里帮助，...
- 5分钟解决 IntelliJ IDEA 使用问题(免费激活至 2100 年)
-
直接进入正题！效果安装1.官网下载idea...
- 【中高级前端必看】- 结合代码实践，全面学习前端工程化
-
前言前端工程化，简而言之就是软件工程+前端，以自动化的形式呈现。就个人理解而言：前端工程化，从开发阶段到代码发布生产环境，包含了以下几个内容：开发构建测试部署...
- Android绘制流程（android界面绘制）
-
Android绘制流程来源：极客头条MFC、WTL、DuiLib、QT、Skia、OpenGL。Android里面的画图分为2D和3D两种:2D是由Skia来实现的，3D部分是由OpenGL实现...
- ExpandListView 的一种巧妙写法（g的另一种写法上下两个圈连起来怎么打）
-
ExpandListView大家估计也用的不少了，一般有需要展开的需求的时候，大家不约而同的都想到了它然后以前自己留过记录的一般都会找找以前自己的代码，没有记录习惯的就会百度、谷歌，这里吐槽一下，好几...
- 通过圆形载入View了解自定义View（圆形div怎么搞）
-
这是自定义View的第一篇文章，通过制作简单的自定义View来了解自定义View的流程。自定义View是Android学习和开发中必不可少的一部分。通过自定义View我们可以制作丰富绚丽的控件，自定...
- 鸿蒙开源第三方组件——自定义流式布局组件FlowLayout_ohos
-
前言基于安卓平台的自定义流式布局组件FlowLayout（https://blog.csdn.net/fzhhsa/article/details/103003019），实现了鸿蒙的功能化迁移和重构...
- 手把手带你写FlowLayout(流式布局)
-
流式布局在android中主要应用在搜索记录和用户标签，下面是效果图首先我们分析流式布局的原理。其实就是当一个子view加上之前的子view的宽度超过了父容器的宽度的时候就换行。接下来我们手把手书写流...
- Android View（android view使用mvvm架构）
-
AndroidUI界面架构每个Activity包含一个PhoneWindow对象，PhoneWindow设置DecorView为应用窗口的根视图，在里面就是TitleView和ContentView...
- 《教你步步为营掌握自定义View》一文读后感
-
今天读了简书作者［milter］的一篇文章《教你步步为营掌握自定义View》，大有裨益。作者以幽默风趣、通俗易懂的大白话一步步讲述了View的来龙去脉，甚是详尽，实属自定义View文集中的一篇非常优秀...
- Android面试官:你究竟有多大的勇气，在简历上写了“精通”?
-
所周知，简历上“了解＝听过名字；熟悉＝知道是啥；熟练＝用过；精通＝做过东西”。最近在面试，我现在十分后悔在简历上写了“精通”二字…先给大家看看我简历上的技能清单：良好的java基础，熟悉掌握面向对象思...
- iOS 视图---动画渲染机制探究（动画渲染用哪个软件最好）
-
腾讯Bugly特约作者：陈向文终端的开发，首当其冲的就是视图、动画的渲染，切换等等。用户使用App时最直接的体验就是这个界面好不好看，动画炫不炫，滑动流不流畅。UI就是App的门面，它的体验伴...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- IntelliJ IDEA插件开发（java开发idea插件）
- 如何验证自己的idea或者如何产生idea?小编教你如何检索……
- idea激活码失效了，这样解决，稳定使用!
- 5分钟解决 IntelliJ IDEA 使用问题(免费激活至 2100 年)
- 【中高级前端必看】- 结合代码实践，全面学习前端工程化
- Android绘制流程（android界面绘制）
- ExpandListView 的一种巧妙写法（g的另一种写法上下两个圈连起来怎么打）
- 通过圆形载入View了解自定义View（圆形div怎么搞）
- 鸿蒙开源第三方组件——自定义流式布局组件FlowLayout_ohos
- 「经典总结」一个View，从无到有会走的三个流程，你知道吗?
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)