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

最新推荐文章于 2024-08-10 09:42:48 发布
最新推荐文章于 2024-08-10 09:42:48 发布
阅读量942 收藏 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元/天 解锁文章
渴望看海的少年
关注
专栏目录
前端字体图标使用
weixin_62321552的博客
04-12 1180
阿里的字体图标库: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 503
字体图标 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图的缺点： 1.图片文件还是比较大的。 2.图片本身放大和缩小会失真。 3.一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。 字体图标的优点 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 灵活性：本质其实是文字，可以很随意的改变
前端字体图标的使用总结
海阔天空
03-14 935
有时候我们业务中会遇到需要字体图标的场景比如在不同的地方图标显示的颜色不同，这个时候使用字体图标就很适合，这个场景我遇到了几次。 使用字体图标的两种方式： 1.让设计给出图标的svg文件，上传到iconfont上，然后再下载就可以和使用iconfont方式一样去使用了。 2.通过css的mask属性直接引入svg文件 再通过样式改变图标颜色和大小 a)法一 <div class="icon></div> .icon { width: 16px; heigh
前端 HTML 字体图标
最新发布
一步一个脚印，脚踏实地的走
08-10 983
灵活性：灵活地修改样式，例如：尺寸、颜色等 轻量级：体积小、渲染快、降低服务器请求次数 兼容性：几乎兼容所有主流浏览器 使用方便：先下载再使用
前端学习之CSS——字体图标
Jane_xxxxxy的博客
07-29 581
1. 字体图标 1.1 字体图标的产生 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点的，但是缺点很明显。 图片文件还是比较大的。 图片本身放大和缩小会失真。 一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。 1.2 字体图标的优点 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了
前端学习之字体图标(iconfont)
no pains,no gains
07-02 4306
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
自学web前端笔记小结---CSS3
qq_41801762的博客
09-15 744
CSS3笔记 CSS3选择器规范地址： 问题： 1.CSS:cascading style sheets（层叠样式表） 面试常问 2.样式表及组成关系：由一条条规则（选择器+声明块）组成 笔试常考 声明：CSS属性+CSS属性值组成的键值对 3.浏览器读取编译CSS的顺序：从右往左 eg.div ul li .test{ } 为什么？有机会一次选中目标元素（算法复杂度低） 4...
前端网站实例100套源码
02-02
本资源包“前端网站实例100套源码”是一个极其宝贵的自学和实践工具，提供了丰富的前端项目案例，涵盖各种类型的网站设计，包括企业官网、电商网站、个人博客、资讯门户等。以下将详细解析这些知识点： 1. **HTML与...
学习Web前端，是应该自学，还是参加培训班？
Cangjie627的博客
05-20 526
先说观点，我强烈建议每个人都要自学，不要参加培训班。我干web前端工程师这个职位已经有6年多的时间，之前在蚂蚁金服做过2年，后来离开是因为加班实在熬不住才走的，像这些已经上市的互联网公司几乎没有不加班的，基本上都是996，虽然工资给的是很高，但谁也顶不住总加班没有生活的状态。由于自己在这行业已经有6年的工作经验，所以对这个行业的情况还是比较了解的，像在蚂蚁金服、腾讯、百度、美团、饿了么这样的大厂中......
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4810
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
前端字体图标库
qq_38969618的博客
06-23 353
1.阿里巴巴矢量字体图标库：https://www.iconfont.cn/
Web前端——字体图标
Singe_lq的博客
07-03 456
important;
前端字体图标,2D变形,以及渐变的使用
hhhhboom的博客
03-06 207
前端字体图标,2D变形,以及渐变的使用
手把手制作前端图标字体
Renners的博客
06-30 547
自定义生成前端图标库
前端基础：CSS中iconfont字体图标
欧阳-同学的博客
06-17 213
2、将iconmoon文件夹中fonts文件夹复制粘贴到根目录(图中基础文件夹)下(与.html同级)；3、将iconmoon文件夹中style.css类似下方代码复制到< style>中/CSS文件中；4、点击打开iconmoon文件夹中demo.html，将字体图标对应 “小方块” 复制到标签；1、icomoon网页 --> icomoonAPP --> 左上角impact点击；1、字体图标引入或追加时，运行后显示“小方框”，关闭应用，重启电脑试试；3、 选择添加的字体图标重新下载；
前端的学习之路：初级CSS---图标字体
weixin_44647555的博客
02-08 147
图标字体 <!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 630
一、字体图标，可以结合bootstrap等一起用 http://www.fontawesome.com.cn/ 二、图标Logo，可以下载图片 https://www.iconfont.cn/
从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
每一次跌倒都是为了华丽的站起来。
02-22 1217
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS） 复习：从零开始学前端：定位 — 今天你学习了吗？（CSS：Day17） 文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第十八节课：字体图标的引入一、阿里字体图标的引入二、阿里字体图标的使用(免费)三、外国网站的字体引用(Some need little money)四、ico网站logo的设置五、练习 前言 补作业补作业补作业~ 第十八节课：字体图标的引入 一、阿里字体图标的引入 我们在小米官网页面
Python自学requests-html：入门与实战教程
在自学过程中，作者分享了查找和学习资源的过程，如B站的UP主教学视频、CSDN和简书上的博客。这些资源对于初学者来说是宝贵的参考，帮助他们理解和实践`requests-html`的使用技巧。 这篇文档为想要学习`requests-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值