字体图标怎么使用

字体图标怎么使用

工具/原料
SVG图片
HTML5
CSS3
HBuilderX
截图工具
浏览器
WPS
第一，制作字体图标
1
打开浏览器，在搜索栏输入icomoon.io，然后点击搜索

image001.png

2
查找到对应的字体转换官网，点击进入并点击右上角的IcoMoon App

image002.png

3
进入到字体图片上传界面，点击Import Icons按钮，上传svg图片

image003.png

4
上传完成后，点击Generate Font按钮，生成字体图标

image004.png

5
生成完毕后，点击Download按钮，下载字体图标文件

image005.png

第二，引用字体图标
解压压缩包，然后将fonts文件夹，全部复制到Web项目中

image006.png

在指定页面文件夹，鼠标右键新建HTML，输入文件名称，然后点击创建

image007.png

打开已新建的页面，向body中添加标签和文字内容

image008.png

接着添加style标签，将字体的相关设置和属性添加到样式中

image009.png

将标签修改成span，然后设置span的样式和字体属性

image010.png

保存代码并运行项目，查看字体加载情况和界面显示的效果

image011.png

END
总结
1、制作字体图标
2、引用字体图标

image012.png

• 本内容来源互联网，如涉及版权问题请及时联系站长
• 为防止代码解析，除代码框内<>为正常，其余请重新替换<>尖括号

内容不错，感谢分享。