关键词：
在做PC端/手机端Web项目中，我们会经常遇到图标以何种形式在服务器上存在并在前端显示的问题。比如之前比较流行使用SVG显示icon。
另外，现在移动端web app越来越流行，但是图标在手机上显示会比较模糊，现在有很多小的Icon，如分享、回复、赞、返回、话题、访问、箭头等，这些Icon一般都是纯色的。
开始制作时可以考虑使用双倍大小的Sprite图（雪碧图），通过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想；
后来又考虑多套图标适配方案、SVG矢量图等，都因为种种原因不理想（如多套图标繁琐、Android 2.3不支持SVG格式等）
现在，介绍当下首选的以及最流行的方法：图标（icon）字体化
首先，我在一个web项目中，有这样一个目录文件：static/fonts/icomoon.eot、static/fonts/icomoon.svg、static/fonts/icomoon.ttf、static/fonts/icomoon.woff
上面四个文件就是图标字体化
eot：IE浏览器所需图标格式
svg：更高版本浏览器所需图标格式
ttf：Firefox浏览器所需图标格式
woff：IE浏览器所需图标格式
优缺点：
1. 图标清晰
2. 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化
3. 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件
4.兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里
除了以上优势之外，当然也有劣势
1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。
如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色
】如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色【英文标题】：Howtochangethecolorofradiobuttonwithfontawesomeiconinreact,styledcomponents【发布时间】：2022-01-1520:22:30【问题描述】：我只想改变点击的图标颜色，但点击时... 查看详情
学习实现bootstrapglyphicons字体
...需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome开发者工具，定位到对应的elment后，得知他是使用的CSS伪元素技术。 1 <span 查看详情
bzoj2396:神奇的矩阵(矩阵乘法+随机化)
这题n三方显然会GG... 运用矩阵乘法的性质A*B*R=A*(B*R)=C*R，于是随机化出一个一列的R，就可以把复杂度降低成n方...大概率是不会错的#include<iostream>#include<cstring>#include<cstdlib>#include<cstdio>#include<algorithm>... 查看详情
bzoj2396神奇的矩阵随机化
题目描述给出三个行数和列数均为N的矩阵A、B、C，判断A*B=C是否成立。输入题目可能包含若干组数据。对于每组数据，第一行一个数N，接下来给出三个N*N的矩阵，依次为A、B、C三个矩阵。输出对于每组数据，若A*B=C成立，则输出... 查看详情
关于阿里云图标库---iconfont的使用
...面的布局，还有图标字体的使用。当时发现了iconfont这个神奇，恰好有个小姐姐说也想学一学，所以写一篇这个博文推荐给大家。iconfont官网传送门：http://www.iconfont.cn/下面进入正题： 第1步进入百度，输入iconfont.然后点进去。... 查看详情
图标字体：它们是如何工作的？
】图标字体：它们是如何工作的？【英文标题】：IconFonts:Howdotheywork?【发布时间】：2013-03-0808:13:37【问题描述】：我知道图标字体只是字体，您可以通过调用它们的类名来获取图标，但是图标字体是如何工作的？我已尝试检查Chr... 查看详情
图标字体切断图标顶部
】图标字体切断图标顶部【英文标题】：Icon-fontcutsofftopoficon【发布时间】：2019-05-2519:38:20【问题描述】：我对CSS中的图标字体比较陌生，现在遇到了以下问题：我有几个包含图标的框。遗憾的是，图标的上半部分被剪掉了。我... 查看详情
关于字体图标的问题(代码片段)
作为前端，我们经常需要和美工拿字体图标文件，经常遇到的有eot，ttf，woff，svg拿到字体图标文件，我们就要进行一个字体图标文件css编写，方便后期使用@font-face/*1.首先指定字体的系列,我们指定为字体图标*/font-family:"自定... 查看详情
如何制作图标字体（如何将svg转换为css可用的图标字体）
转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情
如何制作图标字体（如何将svg转换为css可用的图标字体）
转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情
自制字体图标
使用字体图标的优点：1.比图标更清晰2.把图片当做字体，减少对服务器的请求，性能优化3.可以解决原先底部点击小图片出现空白的bug做法也比较简单：（直接在阿里字体图标库选择的图标可能会出现图标线条粗细不一致，UI要... 查看详情
字体图标的用法
第一次听说字体图标--iconfont，感觉是：哇，好高大上的样子，会不会很难啊。然而当真正去用的时候，才发现，网上的字体图标库为我们做了太多工作，我们只需要傻瓜式的挑选自己需要的图标，傻瓜式的复制粘贴就可以... 查看详情
样式化 MarkerClusterer 图标？
】样式化MarkerClusterer图标？【英文标题】：StylingMarkerClustererIcons?【发布时间】：2011-12-1116:00:56【问题描述】：我正在使用MarkerCluster.js在我的googlemapsapi中创建集群。集群按照我想要的方式工作，但是我想设置不同于黄色、蓝色和... 查看详情
酷炫字体背景图的实现——神奇的background-clip:text(代码片段)
愉快的时光总是飞快，七天小长假已接近尾声，抓住假期的尾巴，再学个新知识点——css的background-clip:text属性...会不会有种陌生的感觉，毕竟在我们的印象里，background-clip只有padding-box、border-box、content-box三个属性，这个te... 查看详情
扩展layui中的自带字体图标
项目中，虽然layui的字体图标库中已经有了1000多个图标了，但是也有时候不能满足我们自定义图标的需求，所以需要进行自定义，具体步骤如下：1.在iconfont上找到自己喜欢的图标，也可以上传ui做好的图标，做自己喜欢的图标，... 查看详情
项目经验：glyphicons字体图标改造，制造适合自己项目的字体图标
...不陌生了，大型的项目一定会用到它。它的DOM结构，字体图标，组件，响应式布局等，很大程度上提高了WEB开发速度。 在bootstrap刚出来的时候，它拥有丰富的组件、美丽优雅的排版布局、漂亮的设计、卓越的兼容性... 查看详情
字体图标使用
最近写了一个使用bootstrap的项目，用到了字体图标，下面简要介绍一下在项目中使用字体图标的一些经验1.在使用bootstrap时，body默认的字体是西文字体，所以需要手动设置字体body{font-family:"HelveticaNeue",Helvetica,MicrosoftYahei,HiraginoSan... 查看详情
图标字体
3.下载玩的文件解压就可以只写用一、图标字体是什么?简单的来说，就是将图标变成字体，通过修改样式属性，就改变图的颜色和大小，并不会因此而导致图片失真。icomoon.io是专门提供图表字体下载的网站二、如何下载默... 查看详情