要是面试的问我这个我肯定忘了这个单词了。。
这个也是解决前端资源优化的一种方案，原理很简单：就是全局就引一张图片，然后在背景图片靠着background-position显示出来
展现一下老版本的bootsrap的方案
图片是这样的：
平时开发也可以这么做，节省了资源，图标字体拿来就用
看一下新版bootstrap做法
很简答，先引入字体文件，然后根据他的unicode直接就可以显示，这样出来的是真的字，可以根据你更改的文字颜色而变化；
如果有图表不在某些框架的库里，都是我们公司自己做的咋办呢，最差的办法就是直接引入png了，但是肯定有好方法了
推荐一个网站Iconfont-阿里巴巴矢量图标库官网，提供了转换你的svg为字体的方案，并顺手帮你生成了css文件
生成的文件目录是这样的
打开iconfont.css
发现这个代码很眼熟了吧，然后引入你的项目吧，在这个网站上有如何转换.AI转换SVG的方法。
先看原理：
代码太长，直接上图
首先定义这些图标放在页面上，放在那里都行，反正也不占地方，也看不见，安全起见放前边吧。
官方解释：
元素用来定义一个图形模板对象，它可以用一个元素实例化。元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个元素本身是不呈现的。只有元素的实例（亦即，一个引用了的 元素）才能呈现。
定义以后引用
就这样了
显示出来了，再看看DOM结构是什么，原来如此，相当于把我们定义的，复制过来某个部分让他显示了。
大功告成。
实际使用中还是要借助工具Iconfont-阿里巴巴矢量图标库官网
刚才咱们下载过这个了图标了，都在里边了，找到
引入之后再添加点css 代码
这样我们直接使用就好了，使用方法
然后你对他想放大就放大，想变色就变色了。。随你心意了。
至于svg-sprite-loader 先放一放。以后研究了再说
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/162588.html