【HTML + CSS】字体图标
程序员文章站
2024-02-16 13:00:04
...
推荐网站:
-
icommon字库: http://icommoon.io
-
阿里icon font字库: http://www.iconfont.cn/
下载字体包
字体引入到HTML
得到压缩包之后,我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉,我们后面还有用的。
最后一步,是最重要的一步了, 就是字体文件已经有了,我们需要引入到我们页面中。
1. 首先把 fonts文件夹放入我们 根目录下
2. html标签内里面添加结构
<span></span>
3. 在样式里面声明字体: 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
@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;
}
4. 给盒子使用字体
span {
font-family: "icomoon";
}
7. 追加字体图标
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做
把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。