首页 > 其他 > 详细

icomoon字体图标的使用

时间:2020-12-02 00:20:33      阅读:57      评论:0      收藏:0      [点我收藏+]

一.首先进入官网

Icon Font & SVG Icon Sets ? IcoMoon

技术分享图片

二.点击右上角的icoMoon APP,进入到如下界面

技术分享图片

三.如果你想要别的图标,可以划到最底部,点击 Add Icons From Library...

就会进入到如图所示的界面,点击Add 就会加载出你想要的图标了

技术分享图片

四.当你选好了所需要的图标的时候,就可以点击右下角的Generate Font 就会出现如图所示的界面,点击dowland就可以下载了

技术分享图片

五.下载完就会出现一个压缩包,对压缩包进行解压,把fonts文件夹放在根目录下

技术分享图片

六.打开压缩包里面的style.css,把选中的蓝色字复制一遍

技术分享图片

七.把刚刚复制的字粘贴到vs.code中,再到body中准备一个盒子

技术分享图片

八.打开压缩包里面的demo.html,复制想要引入的图标字体的旁边的小方框

技术分享图片

九.把刚刚复制的小方框粘贴到准备的盒子里面,再到样式里面申明字体的样式

技术分享图片

十.最终的效果,如图所示

技术分享图片

icomoon字体图标的使用

原文:https://www.cnblogs.com/yx19991006/p/14071502.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!