如何使用svg字体图标

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

荒诞的热水02s
2016-12-06 · 知道合伙人软件行家

荒诞的热水02s
知道合伙人软件行家

采纳数：752 获赞数：1268

参与过多个软件的研发和测试过程具有出色的研发技巧及分析能力，对技术、行业的发展有敏锐的判断力

向TA提问私信TA

关注

展开全部

1、网上搜索矢量图标库，比如教程中用到的是“阿里巴巴矢量图标库”。进入网站选择风格一致的图标，点选进行下载~

2、使用font-face声明字体。font-family是自定的字体名称，url是字体文件的存放路径，format是字体文件格式。
@font-face {
font-family: 'iconfont'; /*自定的字体名称*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
3、定义一个css样式，使用iconfont字体。
.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;
}
4、挑选相应图标并获取字体编码，将样式应用于页面即可。
<i class="iconfont">3</i>