字体图标
程序员文章站
2024-02-16 23:28:04
...
前言:字体图标由于其灵活及以维护,在越来越多的页面中开始使用字体图标。
大家可以在www.icomoon.io中下载字体图标,也可以将精灵图转换为字体图标。因为是国外的服务器,所以加载的慢一些
选择自己需要的字体图标下载即可。
下载后解压打开如下:
不要删除任何文件
**
字体图标的使用
**
在css中必须写上以下代码,把fonts文件夹复制到css所在的文件夹,不然不会显示字体图标
@font-face { /* 电脑中没有的字体,我们需要声明 */
font-family: 'icomoon';/*是我们字体文件夹的位置*/
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
下有两种引入方法
1、
span {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: pink;
}
<span><\span>
2、
div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: #E44419;
content: "\ea9a";
}
<div></div>
这个在下载的字体包里面的有一个网页,将其打开选择复制
第二种方法是复制前面的数字
**
增加字体图标
**
在下载一次即可。
下一篇: 字体图标