摘要：和元素广泛用于图标。可以直接对图标的属性进行更改，如图标的颜色大小，并且可以组合不同的图标形成所需的图标等。执行以上步骤，若是没有图标显示，可以打开，检查字体库，即引入文件的路径是否正确。
在前端开发中，许多新手常会遇见一个问题，参考的网页上有类似下图的图标，但在资源里却找不到对应的文件，这是因为这些网页使用了图标库。这里介绍一种常见的图标库——FontAwesome的使用。
1.登录Font Awesome官网，下载Font Awesome安装包，最好下载最新版本的，因为最新版本中的更新的子图图标相对于老版本数量比较全面
附：Font Awesome官网
http://fontawesome.dashgame.com/
2.下载好压缩包后，点击文件夹，找到CSS文件夹里面的font-awesome.css或者font-awesome.min.css（表示压缩过的）复制到自己项目里面的CSS文件夹中，并把安装包文件夹中的fonts文件夹整个文件夹复制到自己项目中。
3.打开HTML页面，在head头部中引入font-awesome.css。
当然了，如果没有下载安装包的，可以引入在线css。
比如：
4.图标的引用：font-awesome图标可以任何一个地方引用，只要在该元素的类中加入前缀fa，在加入对应的图标名称。不知道图标的名称，可以在官网中找到对应的图标，即可以找到对应的图标名称。
、
注：Font Awesome 设计为与内联元素一起使用。 和 元素广泛用于图标。
5.可以直接对图标的属性进行更改，如图标的颜色、大小，并且可以组合不同的图标形成所需的图标等。
6.执行以上步骤，若是没有图标显示，可以打开font-awesome.css，检查字体库，即引入fonts文件的路径是否正确。
7.注意事项：引用图标时，一定要在class类中引入fa，然后在添加图标的名称
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1056.html
摘要：自己制作字体图标的时候有需要注意这些阿里图标库的图标多，免费但是编辑器不如好用。建议设计师对于一些常用图标直接去阿里图标库找，下载文件即可。 优点 下面的简介来自，著名字体图标库Font Awesome的首页，http://fontawesome.io： Font Awesome gives you scalable vector icons that can instantly b...
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用，包括固定宽度浮动反转旋转叠加图标等。 引言 奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标...
摘要：文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...
阅读 3743·2021-11-25 09:43
阅读 2151·2021-11-23 10:11
阅读 1366·2021-09-29 09:35
阅读 1284·2021-09-24 10:31
阅读 1965·2019-08-30 15:48
阅读 2334·2019-08-29 15:28
阅读 409·2019-08-29 12:36
阅读 3472·2019-08-28 18:12
