图标格式
-
2023年3月18日发(作者：幼儿园业务学习)在⽹页中使⽤icon图标：png、svg、iconfont
在写个⼈简历时，好多地⽅都⽤到了各式各样的icon图标，不仅是为了样式的美观，更是能够为访客提供很好的指引，⽐如：
放上这些图标，总⽐⼲巴巴的‘点击右侧进⼊详情’好⑧
（在做简历⽹站的时候，本来是想⽤svg⼀把梭的，简单好⽤，也不知道为啥突然觉得，哎，都⽤了这么久svg了，试试png吧:)结果⼀发不可收拾，⼤概⼆⼗多
张png图⽚，还没有⽤雪碧图，我脑壳痛）
（还是建议⽤下⾯提到的svg或者iconfont+css/html吧）
⽅式1：png/jpg...
这个就不⽤多说了，放在span⾥调下定位就好。
⽅式2：svg
关于svg的概念我就不多讲了，也讲不太来。只需要知道它是可缩放⽮量图形的简称，啥是⽮量图形？就是⽤点和线来描述图形。
复制的优点：
1．任意放缩。
⽤户可以任意缩放图像显⽰，⽽不会破坏图像的清晰度、细节等。
2．⽂本独⽴。
SVG图像中的⽂字独⽴于图像，⽂字保留可编辑和可搜寻的状态。也不会再有字体的限制，⽤户系统即使没有安装某⼀字体，也会看到和他们制作时
完全相同的画⾯。
3．较⼩⽂件。
总体来讲，SVG⽂件⽐那些GIF和JPEG格式的⽂件要⼩很多，因⽽下载也很快。
4．超强显⽰效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨⼒和打印分辨⼒。
举个例⼦，这张icon的svg代码：
p-id="10448"width="128"height="128"> 306.778353h-37.345882c-258.7708240-469.052235-216.124235-469.052236-481.400471V483.689412c0-266.480941210.221176-483.689412 469.052236-483.689412h8.854588c99.9303530183.11529474.330353200.161882172.333176h181.549177c105.2912940190.40376587.943529 190.403764195.764706s-85.112471195.764706-190.403764195.764706h-55.296zm-60.235294153.419294V503.567059h115.531294C1085.863454 503.5670591144.472395443..472395368.037647c0-74.932706-58.608941-135.469176-130.16847-135.469176h-237.568l-1.084236-28 .973177C772.639925123.482353709.27239560.235294632.59286660.235294h-8.854588C398.63898460.235294214.921336250.036706214.921336 483.689412v58.910117c0232.327529183.717647421.165176408.816942421.165177h37.345882c130.8310590237.688471-110.351059237.688471-24 6.543059zm-237.688471187.331765c99.1472940180.344471-83.968180.344471-187.392V504.048941c0-32.76826.021647-59.69317658.729411-59.6 93176h114.145883c39.936072.884706-34.03294172.884706-76.2578830-42.285176-32.948706-76.257882-72.884706-76.257882h-447.548236a59.271 52959.271529001-58.729411-59.693176c0-32.70776526.021647-59.69317658.729411-59.693177h144.082824a86.01686.016000-78.245647-52 .826353h-8.854588c-193.4757650-351.472941163.237647-351.472942364.182588v58.910118c0196.547765153.118118356.894118342.558118361. 773176h46.260706zm-37.34588260.295529c-227.1472940-411.708235-189.560471-411.708236-422.128941v-58.910118c0-233.773176184.500706-424. 417882411.708236-424.417882h8.854588c77.7637650141.55294162.524235145.889882141.552941l1.68658830.659765h234.134589c73.6677650 133.1261.44133.12136.493176s-59.452235136.493176-133.12136.493177h-112.64v212.570353c0136.312471-107.700706247.567059-240.579765 247.567059h-7.228235l-30.1176470.12047zM117.460631893.530353a59.27152959.271529001-58.72941259.75341259.21129459.211294001 -58.729412-59.632941V148.781176c0-32.70776526.142118-59.63294158.729412-59.63294132.647529058.72941226.86494158.72941259.63 2941v744.688942z"p-id="10449"> 长的很，对⑧？ 但是谁让⼈家优点那么多呢，最重要的是使⽤class处理svg图⽚的样式的时候⾮常快捷，这是png等位图格式⽐不了的。（就好像你能⽤css调png图⽚颜⾊ 吗？） 如何调整svg图⽚的⼤⼩/颜⾊？ 并不是在加个类名然后在style⾥改 注意fill属性，颜⾊是在这⾥调整的，⽽宽⾼则是在svg标签中修改width与height属性. (上⾯这个例⼦是由两个svg图⽚组合成的) PS：阿⾥的iconfont图标库已经有了复制SVG的功能 ⽅式3： iconfont+css： 注意，这⾥的iconfont不是阿⾥的图标库名称，是...⼀种描绘图标的字体（我这么理解）？ 它不需要导⼊svg代码，也不⽤png图⽚： 来看看例⼦，代码： @font-face{ font-family:'iconfont-css'; src:url("../icomoon(4)/fonts/")format('truetype'); font-weight:normal; font-style:normal; } .iconfont-css{ display:inline-block; } .iconfont-css::before{ content:'e900'; font-size:32px; font-family:'iconfont-css'; } GayHub 效果（我把i标签的斜体取消掉了） content处⼀定要加转义斜杠！ 要调节它的⼤⼩/颜⾊，只要向对待字体⼀样就好了，⽐如妖艳红： 字体⽂件是哪来的？安利⼀个类似阿⾥巴巴iconfont图标库的⽹站：IconMoonApp 数量和覆盖范围肯定不如阿⾥的图标库，但iconfont+css的格式阿⾥的图标库也不⽀持呀 ⼤概介绍下如何使⽤： 选中想要的图标后点击右下⾓⽣成Font⽂件（也可以svg嗷），进⾏下载，在得到的⽂件中有⼀个，在⾥⾯可以看到编码（e900） 说到这个不得不提fontAwesome，也是⼀个很好⽤的图标字体库，对我来说最⼤的优点是能和BootStrap⽆缝兼容，⽤bootstrap的cdn就能直接引⽤它的icon。 FA的引⽤⽅式和BootStrap的字体图标引⽤⽅式是⼀样的，也是⼀个特殊类名对应⼀个图标，再⽤公共类名进⾏修饰。 有没有发现这两个引进⽅式好像诡异的相似？ 不诡异，因为FA也是⽤的iconfont+css⽅式 要记录的应该就这么多了，再多写⼀个猜想。 iconmoonapp所有的图标都被整合在⼀个字体⽂件⾥，当我们选取了需要的字体并进⾏选中，是否实际上是⽹站服务器中类似字蛛（font-spider）的程序在运 作，把我们需要的爬取出来单独下载？ （来源于对两个库的字体⽂件的⼤⼩差异）