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产生阴影,还可以做透明、旋转等。
由于是矢量格式,因此字体图标并不会因为放大缩小而产生失真的情况。