游客您好
第三方账号登陆
前端速报
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

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



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

回复 百度 360 搜狗 搜搜 有道 必应 即刻

使用道具 举报

发布主题
返回列表
发布资源 快速回复 站点服务大厅 搜索 官方群

H5手机版

微信公众号

友情链接： 室内设计课程 室内设计问答 设计师求职 中国设计网 室内效果图 3d模型下载 云渲染 3d贴图 木门 装饰设计 红木家具 logo设计 房屋设计图 3dmax教程网 地板 朱峰社区 手绘网 装修设计效果图 ps学习网 图片素材 装饰公司 maya 成都房产 中瓷网 3Dmax模型 瓷砖 DOOOOR设计网 创客教育 装修公司加盟 模型网 广州房产网 大作免费图片库 设计圈 中国设计在线 上海装修公司 成都装修
浙公网安备:33020602000252号 | 网站备案号:浙ICP备14002936号-1 ©2016-2020 本站所有资源均来源于网络，如有侵权请及时联系站长。|网站地图