上一篇，我大致阐述了一下Font Awesome的工作机制和如何使用Font Awesome 4.7

这一篇，我还算比较擅长，那就是，抛弃Font Awesome，使用自定义的图标。

大家先看效果

这里要夸夸Stately的主题，很不错哟~

由于我的网站更改了积分的名称，所以在寻找小图标的时候也遇到了Font Awesome里没有合适图标的问题，我的解决方式是什么呢？

1.直接使用SVG

给大家一个关于SVG的定义

SVG是Scalable Vector Graphics（可缩放矢量图形）的缩写，它是一种基于XML的二维矢量图形标准。SVG文件可以包含直线、曲线、文本等元素，并且可以进行分组、添加样式变换组合等操作。SVG图形具有高度的可缩放性，这意味着它们可以在不同尺寸的屏幕上以相同的质量显示。此外，SVG支持JavaScript和文档对象模型（DOM），因此可以具有交互能力。SVG作为W3C推荐的开放标准，能够与其他网络技术无缝集成，常用于设计高分辨率的Web图形页面。SVG图形还可以包含渐变、嵌入字体、透明效果、动画和滤镜效果，并且可以使用常规的字体命令插入到HTML中

说人话就是，SVG是通过代码来渲染的矢量图形，在现在的主流浏览器上都支持，其实Font Awesome也是SVG图形。

那什么是矢量图形呢？我给大家举个很直观的例子

下面给大家介绍两个可以在线免费SVG图标的网站

阿里巴巴矢量图标库：https://www.iconfont.cn/

Iconify：https://iconify.design/

大家在这些网站上可以尽情的寻找自己喜欢的图标，找到后，直接复制SVG代码，替换掉之前的<i class="blablabla"></i>标签的图标即可。

这个方法，就完全抛弃了Font Awesome的css和font，也不需要引用任何的代码，直接在html中写入SVG代码即可显示图形，并且SVG具备高度的可缩放性，大小及颜色可以由SVG代码直接控制或者CSS控制。

下面介绍一些相对高级的操作

2.用CSS伪类方法添加SVG

例如，这是一个 Home SVG 图标，它的 SVG 代码如下：

<svg t="1628322850713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2009" width="150" height="150"><path d="M168.832 359.04L489.813333 162.986667a42.666667 42.666667 0 0 1 44.458667 0l320.938667 196.096A85.333333 85.333333 0 0 1 896 431.872V810.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-378.794667a85.333333 85.333333 0 0 1 40.832-72.832zM426.666667 554.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v128a42.666667 42.666667 0 0 0 42.666667 42.666667h170.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-128a42.666667 42.666667 0 0 0-42.666667-42.666666h-170.666666z" fill="#000000" p-id="2010"></path></svg>

而它在Font Awesome里的CSS是这样的

.fa-home:before {
 content: "\f015";
 font-family: FontAwesome;
}

把这段 SVG 代码直接放到 content 属性中肯定是不对的，需要进行编码才行。

这里的编码可以选择 base64编码、URL编码等。

2.1.URL编码

将以上 SVG 代码进行 URL 编码后，结果如下：

%3Csvg%20t%3D%221628322850713%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222009%22%20width%3D%22150%22%20height%3D%22150%22%3E%3Cpath%20d%3D%22M168.832%20359.04L489.813333%20162.986667a42.666667%2042.666667%200%200%201%2044.458667%200l320.938667%20196.096A85.333333%2085.333333%200%200%201%20896%20431.872V810.666667a85.333333%2085.333333%200%200%201-85.333333%2085.333333H213.333333a85.333333%2085.333333%200%200%201-85.333333-85.333333v-378.794667a85.333333%2085.333333%200%200%201%2040.832-72.832zM426.666667%20554.666667a42.666667%2042.666667%200%200%200-42.666667%2042.666666v128a42.666667%2042.666667%200%200%200%2042.666667%2042.666667h170.666666a42.666667%2042.666667%200%200%200%2042.666667-42.666667v-128a42.666667%2042.666667%200%200%200-42.666667-42.666666h-170.666666z%22%20fill%3D%22%23000000%22%20p-id%3D%222010%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E

接下来，我们需要用以下方式引入：

.fa-home:before {
 content: url('data:image/svg+xml;charset=utf8,这里放URL编码');
}

data 表示数据，image/svg+xml 表示格式，%20charset=utf8 表示编码，最后的地方放置刚刚转换好的URL编码。最后的 CSS 如下：

.fa-home:before {
 content: url('data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221628322850713%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222009%22%20width%3D%22150%22%20height%3D%22150%22%3E%3Cpath%20d%3D%22M168.832%20359.04L489.813333%20162.986667a42.666667%2042.666667%200%200%201%2044.458667%200l320.938667%20196.096A85.333333%2085.333333%200%200%201%20896%20431.872V810.666667a85.333333%2085.333333%200%200%201-85.333333%2085.333333H213.333333a85.333333%2085.333333%200%200%201-85.333333-85.333333v-378.794667a85.333333%2085.333333%200%200%201%2040.832-72.832zM426.666667%20554.666667a42.666667%2042.666667%200%200%200-42.666667%2042.666666v128a42.666667%2042.666667%200%200%200%2042.666667%2042.666667h170.666666a42.666667%2042.666667%200%200%200%2042.666667-42.666667v-128a42.666667%2042.666667%200%200%200-42.666667-42.666666h-170.666666z%22%20fill%3D%22%23000000%22%20p-id%3D%222010%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

这样就可以显示出 SVG 图标了。但是 URL 编码有一个致命的缺点，带有 fill 颜色填充样式的 SVG 进行 URL转换后，无法显示出颜色，依旧是默认的黑色，且因为安全问题也无法使用 CSS 样式进行控制。

2.2.base64编码

base64编码工具：https://tool.chinaz.com/tools/base64.aspx

将以上 SVG 代码进行 base64 编码后，结果如下：

PHN2ZyB0PSIxNjI4MzIyODUwNzEzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwMDkiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48cGF0aCBkPSJNMTY4LjgzMiAzNTkuMDRMNDg5LjgxMzMzMyAxNjIuOTg2NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDQuNDU4NjY3IDBsMzIwLjkzODY2NyAxOTYuMDk2QTg1LjMzMzMzMyA4NS4zMzMzMzMgMCAwIDEgODk2IDQzMS44NzJWODEwLjY2NjY2N2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMyA4NS4zMzMzMzNIMjEzLjMzMzMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMy04NS4zMzMzMzN2LTM3OC43OTQ2NjdhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA0MC44MzItNzIuODMyek00MjYuNjY2NjY3IDU1NC42NjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMC00Mi42NjY2NjcgNDIuNjY2NjY2djEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2NyA0Mi42NjY2NjdoMTcwLjY2NjY2NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2Ny00Mi42NjY2Njd2LTEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwLTQyLjY2NjY2Ny00Mi42NjY2NjZoLTE3MC42NjY2NjZ6IiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIyMDEwIj48L3BhdGg+PC9zdmc+

很相似，base64 引入方法如下：

.fa-home:before {
 content: url('data:image/svg+xml;base64,这里放base64编码');
}

只需修改编码参数即可，完整 CSS 如下：

.fa-home:before {
 content: url('data:image/svg+xml;base64,PHN2ZyB0PSIxNjI4MzIyODUwNzEzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwMDkiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48cGF0aCBkPSJNMTY4LjgzMiAzNTkuMDRMNDg5LjgxMzMzMyAxNjIuOTg2NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDQuNDU4NjY3IDBsMzIwLjkzODY2NyAxOTYuMDk2QTg1LjMzMzMzMyA4NS4zMzMzMzMgMCAwIDEgODk2IDQzMS44NzJWODEwLjY2NjY2N2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMyA4NS4zMzMzMzNIMjEzLjMzMzMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMy04NS4zMzMzMzN2LTM3OC43OTQ2NjdhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA0MC44MzItNzIuODMyek00MjYuNjY2NjY3IDU1NC42NjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMC00Mi42NjY2NjcgNDIuNjY2NjY2djEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2NyA0Mi42NjY2NjdoMTcwLjY2NjY2NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2Ny00Mi42NjY2Njd2LTEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwLTQyLjY2NjY2Ny00Mi42NjY2NjZoLTE3MC42NjY2NjZ6IiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIyMDEwIj48L3BhdGg+PC9zdmc+');
}

优化 SVG 代码 我们发现复杂的 SVG 转换后的编码往往会更多更长，你可以参考 Optimizing SVGs in data URIs，来压缩你的 SVG 代码，减少编码长度。