自学前端-（字体图标的操作方法）

最新推荐文章于 2024-05-04 23:19:14 发布
最新推荐文章于 2024-05-04 23:19:14 发布
阅读量905 收藏 1
点赞数
分类专栏： 前端基础 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DespairA/article/details/120039879
版权
本文介绍了如何使用icomoon字体库下载和使用字体图标，包括下载字体文件、复制字体声明、通过after伪元素引用图标。同时，文章还详细讲解了网站 favicon 图标的制作步骤，包括图片转ico格式、放置于根目录和添加HTML代码。
摘要由CSDN通过智能技术生成

一，字体图标的下载

icomoon字体库

点击Add Icons From.....可以看到=更多的图标 

 

 

点击Gener Font 打包选好的字体图标

 

 然后弹出的界面点击右下角的Download的选框

 下载后可以获得一个压缩包，解压后获得一个名为icomoon的文件夹，打开这个文件夹，再打开fonts文件夹，可以看到四个字体文件，四个字体文件是由于兼容不同浏览器的原因。

最低0.47元/天 解锁文章
渴望看海的少年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端字体图标使用
weixin_62321552的博客
04-12 1147
阿里的字体图标库:https://www.iconfont.cn/ 在里面下载图标对应的源码解压后有6个文件dome.css：里面是demo_index.html的样式 demo_index.html：有字体使用的说明 iconfont.css：使用css来引用字体图标 iconfont.js：使用js进行引用方式字体图标 iconfont.json：这面写个每一个字体图标的JSON的数据格式 iconfontt.tth：是字体图标的实现，前面css后js文件都是引用 使用字体图标的方式： <!DOC
CSS第七天学习总结—— 字体图标
weixin_52819925的博客
07-31 464
字体图标 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图的缺点： 1.图片文件还是比较大的。 2.图片本身放大和缩小会失真。 3.一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。 字体图标的优点 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 灵活性：本质其实是文字，可以很随意的改变
前端字体图标的使用总结
海阔天空
03-14 897
有时候我们业务中会遇到需要字体图标的场景比如在不同的地方图标显示的颜色不同，这个时候使用字体图标就很适合，这个场景我遇到了几次。 使用字体图标的两种方式： 1.让设计给出图标的svg文件，上传到iconfont上，然后再下载就可以和使用iconfont方式一样去使用了。 2.通过css的mask属性直接引入svg文件 再通过样式改变图标颜色和大小 a)法一 <div class="icon></div> .icon { width: 16px; heigh
前端学习之CSS——字体图标
Jane_xxxxxy的博客
07-29 543
1. 字体图标 1.1 字体图标的产生 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点的，但是缺点很明显。 图片文件还是比较大的。 图片本身放大和缩小会失真。 一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。 1.2 字体图标的优点 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了
前端学习之字体图标(iconfont)
no pains,no gains
07-02 4249
Web字体 字体格式 不同的浏览器支持的字体格式是不一样的。 tureTypeFont(.ttf)格式 . ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+ OpenTypeFont(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0
2015-04-操作系统概论自学考试试题和答案.pdf
11-17
2015-04-操作系统概论自学考试试题和答案.pdf
前端自学笔记 前端面试题 前端开发 font-end
最新发布
07-24
前端自学笔记 前端面试题 前端开发 font-end
Python自学教程-05-字符串常用操作方法之查找.ev4.rar
09-19
本教程“Python自学教程-05-字符串常用操作方法之查找”将深入探讨如何在Python中对字符串进行查找和操作，这对于任何初学者来说都是一个不可或缺的主题。以下是一些关于这个主题的关键知识点： 1. **字符串定义**...
自学Linux操作系统命令的四种方法
08-14
自学Linux操作系统命令的四种方法 本文将为您介绍四种自学Linux操作系统命令的方法，以帮助您更好地掌握Linux命令，从而成为Linux高手。 方法一：每日提示 要学习Linux命令，可以在每次打开终端时，让它显示...
前端字体图标库
qq_38969618的博客
06-23 326
1.阿里巴巴矢量字体图标库：https://www.iconfont.cn/
Web前端——字体图标
Singe_lq的博客
07-03 389
important;
前端字体图标,2D变形,以及渐变的使用
hhhhboom的博客
03-06 191
前端字体图标,2D变形,以及渐变的使用
手把手制作前端图标字体
Renners的博客
06-30 510
自定义生成前端图标库
前端基础：CSS中iconfont字体图标
欧阳-同学的博客
06-17 185
2、将iconmoon文件夹中fonts文件夹复制粘贴到根目录(图中基础文件夹)下(与.html同级)；3、将iconmoon文件夹中style.css类似下方代码复制到< style>中/CSS文件中；4、点击打开iconmoon文件夹中demo.html，将字体图标对应 “小方块” 复制到标签；1、icomoon网页 --> icomoonAPP --> 左上角impact点击；1、字体图标引入或追加时，运行后显示“小方框”，关闭应用，重启电脑试试；3、 选择添加的字体图标重新下载；
uniapp字体图标的使用步骤详细版【前端开发】(1)，阿里P8亲自教你
2401_84103512的博客
04-04 1587
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Bootstrap 按钮（实例 ）
2401_84093443的博客
05-04 794
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
前端的学习之路：初级CSS---图标字体
weixin_44647555的博客
02-08 120
图标字体 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标字体</title> </head> <body> <!--
前端需要用到的字体图标、图标logo来源
蓝影灵的博客
06-22 612
一、字体图标，可以结合bootstrap等一起用 http://www.fontawesome.com.cn/ 二、图标Logo，可以下载图片 https://www.iconfont.cn/
Python自学requests-html：入门与实战教程
在自学过程中，作者分享了查找和学习资源的过程，如B站的UP主教学视频、CSDN和简书上的博客。这些资源对于初学者来说是宝贵的参考，帮助他们理解和实践`requests-html`的使用技巧。 这篇文档为想要学习`requests-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值