在css中，将fonts和style.css文件引入后，可以使用行内标签添加字体图标，语法格式为“<行内 标签元素 class="名称">”。字体图标颜色、大小都可以通过对应的css来修改；文件比较小，利于页面减少http请求。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
在线生成
通过https://icomoon.io/app/ # /select 这个网站来生成。当然还有其他一些类似的网站，但是这个真的很赞，很赞，很赞，说三遍。
导入所有SVG格式的图标，全选点击GenerateFont生成对应的字体图标。然后下载已打包好的 所有文件 。
页面引用相应的字体图标
下载的打包文件目录结构如上图所示，我们只需要引入fonts和style.css文件即可。fonts文件里如下所示，分别为:eot压缩字库，整合后的svg图标，ttf字体，woff字体格式。
style.css里是对fonts文件的引入和相应图标的样式。
@font-face {
font-f ami ly: 'icomoon';
src: url('fonts/icomoon.eot?n54c0o');
src: url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-o PE ntype'),
url('fonts/icomoon.ttf?n54c0o') format('truetype'),
url('fonts/icomoon.woff?n54c0o') format('woff'),
url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');
font-weight : normal;
font -s tyle: normal;
}
[class^="icon-"], [class*=" icon-"] { /* use !important to p rev ent issues w IT h br owser extensions t hat change fonts */
font-f am ily: 'icomoon' !important;
speak: none;
font-style: normal;
font-w ei ght: normal;
font- VAR iant: normal;
text -t ransform: none;
line-height: 1; /* Better Font Rendering === == ====== */
- webkit -font-smoothing: antialiased; -moz- OSX -font-smoothing: grayscale;
}
.icon-uniE900:before {
content: "\e900";
}
.icon-uniE901:before {
content: "\e901";
}
.icon-uniE902:before {
content: "\e902";
}
.icon-uniE903:before {
content: "\e903";
}
.icon-uniE904:before {
content: "\e904";
}
.icon-uniE905:before {
content: "\e905";
}我们可以对上面样式表进行修改，以达到自己页面显示的最佳效果。
<span class="icon-uniE901"></span>
需要什么图标，我们只需给一个行内标签（span，i,em）添加对应的class即可。
总结
使用字体图标确实非常方便，颜色、大小都可以通过对应的css来修改。而且文件比较小，有利于页面加载减少了http请求。
但是如果一个字体图标文件已经生成，我们又有新的图标需要增加时，那么又需要重新生成相应的fonts文件和修改css文件。解决的办法是在生成之前尽可能的把所有用到的图标都加上， 或者 使用第三方字体图标库。
推荐学习：css视频教程
以上就是 css字体 图标怎么用的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css字体图标怎么用 全部内容，希望文章能够帮你解决 css字体图标怎么用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。