CSS：字体图标

1、去哪里得到字体图标的文件？

字体图标的本质是一种字体文件，那么去哪里能挑选并下载字体图标的文件呢？

我们可以登录并使用阿里巴巴的一个专门的字体图标网站iconfont-阿里巴巴矢量图标库去挑选并下载想要的字体图标。

2、字体图标的使用

字体图标的使用分为三步。

首先，使用link将下载好的iconfont.css文件进行引入

<link rel="stylesheet" href="./font/iconfont.css">

然后，将iconfont和icon-zhaoxiangji的类名（类名根据实际情况会有所不同）赋给想要添加字体图标的盒子。

    <span class="iconfont icon-zhaoxiangji"></span>
    <span class="iconfont icon-fangdajing"></span>
    <span class="iconfont icon-weizhi"></span>

最后，在css中调用.icon-zhaoxianji这个类名即可

        span.icon-zhaoxiangji {
            /* width: 100px;
            height: 100px; */
            background-color: pink;
            font-size: 200px;
        }
        span.icon-fangdajing {
            font-size: 300px;
            color: orange;
        }
        span.icon-weizhi {
            font-size: 300px;
            color: orange;
        }

字体图标的本质是文字，因此可以使用font-size设置大小，color改变颜色，shadow产生阴影，还可以做透明、旋转等。

由于是矢量格式，因此字体图标并不会因为放大缩小而产生失真的情况。