前言
当下前端开发过程中,项目页面使用图标时一般不直接引入图片。因为不管你使用的是jpg,png还是svg,每个图片资源的获取都需要向服务器发起请求。这种情况下我们一般会采用图片压缩(俗称雪碧图)或者图标字体的方式来解决请求次数过多问题:
1.针对雪碧图不过多介绍,简单说就是把项目或者页面要用的图标都整合在一张图里,以此减少请求数,fis3和很多npm包都能做到自动整合;
2.另一种则是图标字体(ICON FONT),做法是在项目初始选用一个成熟的图标字体库或者选择直接带有图标库的UI库:
图标字体库:Font Awesome ,阿里 Icon font 等等
成熟的UI框架:Ant Design, 饿了么 Element 等等
借助这些工具,我们不仅可以打造一套符合自己项目业务逻辑的图标字体库,也能直接使用框架提供的图标。
HTML符号集
然而,当你的项目对图标需求不是很大的时候,不管是做一套图标字体库还是压缩图标文件都有一定的维护成本。这个时候,我们可以回到HTML本身。其实,HTML自带就有很多图标/符号,不用额外引入字体库,也不用使用图片定位,直接使用。这里我整理了一份HTML字符对照字典,使用ps软件做了并排处理,方便查询使用。主要参考了HTML特殊字符内容整理,涵盖的图标还是比较全面的
获取源文件以上。
网友评论