Font Awesome使用介绍

Font Awesome的正确简单使用方法
网上看了许多的Font Awesome使用介绍,都是要引用Font-Awesome.css文件,还需要把整个Font Awesome文件都拷贝到项目中,这样不仅容错率极低,一旦不小心把文件路径改了,整个项目的icon部分就挂掉了。而且其中的很多文件其实根本使用不到,白白浪费服务器内存,也不便于后期网站的维护,下面将介绍Font Awesome的正确使用方法。
要使用Font Awesome,我们先要理解Font Awesome图标库的原理,首先,一个字体中是存在特殊符号的,例如网页底部常见的©的编码就是&#169。而Font Awesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,因此我们需要这个图标的话只需要引用这个字体文件就好了
首先来做一个demo页面

name 接着找到Font Awesome内的字体文件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200219184054968.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200219184116621.png) 把这些字体拷贝到你的网页文件夹中,这里建议建立一个单独的字体文件夹,因为一个项目中很可能用到不止一个字体。 接下来要做的,就是在css中引用字体文件了(注,字体的具体路径根据情况自行修改) css代码: @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 然后,就可以在网页中插入你想要的图标了。 找到图标的名称 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020021918420654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nzc2NoZW5sZWkxMjM=,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200219184248877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nzc2NoZW5sZWkxMjM=,size_16,color_FFFFFF,t_70)可以看到,刚才要找的图标的编码为f2b9,其实实际编码为此时就可以在html文件中直接使用这个字符了 HTML代码: name
css代码: .icon{ font-family: FontAwesome; } 这样,就将图标引入到页面中了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200219184337824.png)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值