美文网首页
Iconfont库的使用

Iconfont库的使用

作者: 爱笑的疯小妞 | 来源:发表于2018-01-25 18:41 被阅读0次

1、百度搜索IconFont 或者打开http://iconfont.cn/home/index,登录
2、搜索图片,加入购物车

image.png
3、添加到项目
image.png
4、生成对应文件,“使用帮助”里面详细介绍项目如何引入使用
image.png
symbol引用,使用步骤如下:
第一步:拷贝项目下面生成的symbol代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

相关文章

网友评论

      本文标题:Iconfont库的使用

      本文链接:https://www.haomeiwen.com/subject/pxvmaxtx.html