游客您好
第三方账号登陆
Lv.7 版主
1683号会员,81活跃度,2020/05/16 加入学习
  • 14发帖
  • 14主题
  • 0关注
  • 0粉丝
这个人很懒,什么也没有留下。
最新推荐更多

[CSS样式] 字体图标怎么使用

[复制链接]
前端速报 发表于 2020-5-20 15:46:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
字体图标怎么使用

工具/原料
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

字体图标怎么使用,慧之家



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

发布资源 快速回复 站点服务大厅 搜索 官方群