文章最后更新时间:
Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录,数百万的图标免费使用!
新建Iconfont项目
Iconfont 支持GitHub帐号登录,登录之后你就可以寻找自己需要的图标啦
1.首先,寻找到自己的需要的图标,点击添加入库。
2.接着点击右上方的购物车,点击添加至项目。
这里根据自己的需要自行创建项目
3.添加完成以后会自动转到我的项目里,如果没有自动转入,请点击上方菜单→资源管理→我的项目。
网站集成
使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这三种集成方式各有优劣势,具体请查看官方教程
这里我推荐使用 Symbol 的方式集成到网站中,当然你也可以按照官方的教程使用其它方式集成
第一步:将刚刚新建的项目生成 Symbol 接入链接,并复制
第二步:将代码保存到主题设置
将以下代码中的链接替换为您刚刚复制的链接,将下方代码添加到你的网站,WordPress用户可以在后台自定义HTML。
<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>
简单吧!网站集成 Iconfont图标 就已经全部搞定了!接下来就是使用 Iconfont图标 了!
提醒:WordPress用户请勿直接将代码写入到主题源码,一更新就没了。
使用 Iconfont图标
使用之前先去给图标添加一些CSS样式(子比主题勿用)
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"
中的图标代码,将代码插入到你需要显示图标的地方!
<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>
还是按照在导航菜单中添加图标为例:
最后我们看看效果吧!
© 版权声明
本文是原创文章,采用CC BY-NC-SA 4.0协议,完整转载请注明来自星雨の博客
THE END
暂无评论内容