IcoMoon App中图标的使用方式,亲测有效

1.输入网址进入IcoMoon页面 Ico Moon App

IcoMoon App中图标的使用方式,亲测有效

2.选择想要的图标,添加至SELECT,然后点击Generate Font

IcoMoon App中图标的使用方式,亲测有效

3.点击右下角download下载压缩文件

IcoMoon App中图标的使用方式,亲测有效

4.解压得到的文件

这里我们只用到两个文件,fonts和style.css
IcoMoon App中图标的使用方式,亲测有效

5.将图标添加至web界面

1.首先将fonts下的四个文件复制到你的项目根目录的新建的fonts文件夹
IcoMoon App中图标的使用方式,亲测有效

2.打开style.css文件,复制代码至你的css文件中
这里只用到了阴影部分的代码,记得要在url前面加…/,表示上一个文件夹,将目录导至你创建的fonts文件夹
IcoMoon App中图标的使用方式,亲测有效

3.在html代码中建立相应的标签,这里我用的i标签,并将图标复制至标签的content中
IcoMoon App中图标的使用方式,亲测有效

IcoMoon App中图标的使用方式,亲测有效

ctrl+c和ctrl+v即可

4.添加相应的样式
IcoMoon App中图标的使用方式,亲测有效

5.保存后打开网页查看
IcoMoon App中图标的使用方式,亲测有效

添加成功