bootstrap怎么用_iconfont还能这么用，80%的人都不知道

果小酱又来絮叨了，果酱这么努力，就是希望有一天能得到大家的认可，最终给我国家级嘴碎青年称号。

上一期的面试分享我删改了很多次，面试官事儿那么多，2000字怎么说得完！

纠结来纠结去，索性最后就算了，面试篇就当是个引言

(对，就这么嚣张，2000多字引言你敢信~)

接下来的的更新，就从面试问题开始入手

从问题，到相关概念，一个一个往下撸，一点点延展

哪怕写到地老天荒，也要完成吐槽狂魔的人设。

  

▍祖安第一题，好好说一下上篇提到过的iconfont

•它怎么用

•以及为什么要用它

▶首先，它是个网站，叫阿里巴巴矢量图标库。

长这样

•点进去就能搜图标、下载图标。

这是第一个用法。

▶果酱要说的是和开发小哥哥配合的用法(此处应该有个高大上的标题)：

如何利用iconfont和开发进行项目文件对接！(面试题警告)

﹀

﹀

﹀

▍整个流程分两部分：

•第一部分是我们把图标上传、转化并下载并交给开发

•第二部分是当甩手大爷，端着保温杯枸杞看开发小哥哥苦哈哈的改样式做引用(巴适~)

第二部分大家应该都会，毕竟很弹性，有啥喝啥，没喝的就坐他旁边吧唧嘴嚼益达。

我们康康第一部分具体应该怎么下手。

▶上传=平台是爸爸=我们要按他的规矩来

iconfont要求如下：

这玩意点上传就能看见。

上传在这：

搜索框后面是头像，就是那个猫(它是我的猫，名叫狗东西)

小猫咪后面那个就是上传

1、按它给的模板把我们的图标绘制好：

2、保存为svg格式

敲重点：不是选择‘存储为’，要选脚本

3、上传过程：

我为什么要写这么详细。。。

•保留并提交

上传好是这样的：

•接下来就是把它变成css样式文件，交付开发的过程

流程是：

4、加入购物车——添加到项目——下载

接着下载……逐渐暴躁

5、下载好的压缩包(以开发需要的方式命名)，发给开发，第一步完整结束。

对第二步好奇但又不敢骚扰开发的话，解压后双击第二个文件，有使用教程

以上，整个iconfont的使用方法就安利完了。

▍为啥要用它呢？

(1)一个图标它不是有好多个状态色么，不用iconfont转化，我们就要把这些颜色全部都切出来

碰上个倒霉的等级之类的，除了灰的和有色的，它还有好几个颜色，切图切的连打游戏的时间都没有。

▶用iconfont转化一下再给开发，颜色、样式都由他们从代码里控制，从此我们就告别切图一心上王者。

(2)再有就是尺寸问题，按照开发的2倍尺寸切图，适配到大屏手机上就糊了。

但是iconfont是矢量图，什么机型都能刚住。

。。。也就这点用处了

类似的网站不只iconfont，果酱还用过bootstrap

要是有其他的小伙伴解锁了新的字体网站，请反向安利果酱谢谢。

这次真安利完了。

下期见~

往期推荐

1、ps图层蒙版是什么？

2、五步教你画出科技感线条！

3、充满国际范的yoga风就这么简单

4、抠图用工具就够了！

5、ps中的布尔运算——你一定要掌握的硬核知识

期待 在看、分享、的眼神