CSS - 字体图标

概念

        字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

优点

        轻量级：一个图标字体要比一系列的图像小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；

        灵活性：本质是文字，可以随意地改变颜色、阴影、透明效果、旋转等；

        兼容性：几乎支持所有浏览器；

使用方式

        1.下载字体图标

                一般在两个地方下载：

                        icomoon字库（国外）

                        阿里iconfont字库（国内）

                两种字体图标的使用方式大同小异，此处只对阿里字库的使用方式作详解：

                        （1）登录阿里巴巴矢量图标库账号（无账号可免费注册）；

                        （2）选择需要的图标，然后添加入库，可选择多个；

                                

                        （3）点击页面右上角购物车图案，然后选择添加至项目（没有项目可以创建一个）

                                

                                

                        （4）下载，将字体文件包下载至本地（也可以不用下载，直接通过线上链接进行引用，只是相较于本地引用，线上引用不能保证稳定性）

                                

        2.引用字体图标

                引用的方式有3种，分别是Unicode引用、font-class引用、symbol引用，官方的使用教程都有详细解释，这里介绍的是使用伪元素选择器增添字体图标的用法：

                （1）引入字体文件包中的 iconfont.css 文件（本质上只需要引用其中部分代码进行声明，这里直接引入整个 css 文件更加方便）；

                        

                （2） 在需要引入图标的地方用结构伪类选择器引入响应图标，并进行字体声明；                                                

                             这里需要注意的是，content 属性添加的内容是该图标对应的 unicod（16进制）码，注意要写反斜杠和引号，可以在阿里图库网站中我的项目页面点击相应图标的编辑查看

                                   

                                或者本地字体文件包 iconfont.css 文件中查看

                                        

                                除此之外，content 中还可以添加该图标对应的字符，直接复制粘贴就行，也可以在阿里图库网站中我的项目页面点击相应图标的编辑查看