这是我参与「第四届青训营」笔记创作活动的第9天

前言

相信大家在生活中都会在各种页面上见到不同的图标或者logo，其中有很多是那些专门的设计师自己设计的，不过也有一些是免费使用的，今天我们就来教大家如何使用那些免费的图标，以及如何下载.

一.图标字体介绍

在网页中经常需要使用一些图标，可以通过图片来引入图标

但是图片大小本身比较大，并且非常的不灵活

所以在使用图标时，我们还可以将图标直接设置为字体，

然后通过font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

二.如何下载

1.先在浏览器页面输入Font Awesome

2.然后找到官网进行下载

注意：千万不要去中文翻译的网站去下载，下载后版本会过于落后

3.打开后选择左边

QQ图片20220801215515.png

4.然后直接在另外界面下找到Download进行下载

QQ图片20220801215720.png

5.最后选择版本，下载选择右边的 free

QQ图片20220801215823.png

6.下载完毕后会得到一个压缩包，这时候可以将它解压

7.解压之后将里面的css和webfonts文件按ctrl选中，然后将它拖到vscode中

QQ图片20220801220549.png

三.如何使用

可以直接通过图标字体来使用

           class="fas fa-bell"
           class="fab fa-accessible-icon"
  <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-home fa-fw" style="font-size: 160px;background:MistyRose"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
复制代码

效果展示

注：也可以通过style标签来设置图标大小和颜色等

四.总结

本次分享的图标字体可以结合文档（zeal）来进行使用，具体引用在上面有详细的例子和实例，也感谢大家的阅读，明天见！

css生活中图标的使用和下载 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天