图标库代替图片的方法
网站过多的图片引起网站打开速度的缓慢，这时候就要想办法解决问题，一个是压缩图片，但是过量的的压缩又会引起图片的模糊，而一些形状之类的图片完全可以用css或者字体实现，一些形状我已经在之前的博客里写了出来，这里讲的是用图标库的方法来代替图片；这里我用的是阿里的图标库，官方链接：http://www.iconfont.cn/1.准备时间：1-1进入网站，选择图标库http://www.pslove.cn/wp-content/uploads/2016/12/1-1.png1-2选择你需要的图标，比如这个错误图标（或者在上方搜索处搜索你想要的图标，再或者你可以用AI做一个图标上传到项目{相对更麻烦}）http://www.pslove.cn/wp-content/uploads/2016/12/1-2.png1-3鼠标悬浮上去，出现一个购物车，点击http://www.pslove.cn/wp-content/uploads/2016/12/1-3.png这时候就会进入平常在淘宝类似买东西的一个购物车，http://www.pslove.cn/wp-content/uploads/2016/12/1-4.png1-4点击右上方“购物车”http://www.pslove.cn/wp-content/uploads/2016/12/1-5.png1-5这里是你选择的图标们，然后添加至项目，可以选择你拥有的项目，http://www.pslove.cn/wp-content/uploads/2016/12/1-6.png或者点击添加新项目。http://www.pslove.cn/wp-content/uploads/2016/12/1-7.png进入项目，这时候就会发现你的项目里面多出了你的创建的东西：http://www.pslove.cn/wp-content/uploads/2016/12/1-8.png2，使用时间：2-1.然后选择下载至本地，将这三个图标形成的库下载下来（相对而言，图标越多，相对你比使用图片效果更强，加载更快。）解压你下载的图片http://www.pslove.cn/wp-content/uploads/2016/12/2-1.pnghttp://www.pslove.cn/wp-content/uploads/2016/12/2-2.png
2-2然后打开文件。出来的代码http://www.pslove.cn/wp-content/uploads/2016/12/2-3.png这四个是必须引用的，http://www.pslove.cn/wp-content/uploads/2016/12/2-4.png这三个是引用方式的介绍及使用方法；http://www.pslove.cn/wp-content/uploads/2016/12/2-5.png这两个是你引用的方式js或者css（只选择一个）；这里我要说的是css的适用方法：将五个文件放入你的css里面：http://www.pslove.cn/wp-content/uploads/2016/12/2-6.png2-3打开你的项目：http://www.pslove.cn/wp-content/uploads/2016/12/2-7.png2-4引入css样式；查看库里面的文件是否用上，如果不确定，可以自己重新用编译器的提示引一遍。http://www.pslove.cn/wp-content/uploads/2016/12/2-8.png用浏览器打开下载项目里面的css提示文件，并用F12审查
http://www.pslove.cn/wp-content/uploads/2016/12/2-9.pnghttp://www.pslove.cn/wp-content/uploads/2016/12/2-10.png2-5将你需要的图标的class名复制到你的项目里面http://www.pslove.cn/wp-content/uploads/2016/12/2-11.png用浏览器打开查看效果：http://www.pslove.cn/wp-content/uploads/2016/12/2-12.png2-6你可以再单独写样式图标变色或者变大，如果怕冲突，可以再给div加一个id值http://www.pslove.cn/wp-content/uploads/2016/12/2-13.pnghttp://www.pslove.cn/wp-content/uploads/2016/12/2-14.png是不是就可以了，如果你不想要div里面的字变色，可以直接写id:before,因为字体库就是用的beforehttp://www.pslove.cn/wp-content/uploads/2016/12/2-15.pnghttp://www.pslove.cn/wp-content/uploads/2016/12/2-16.png好了，这就是阿里图标库的使用方法0...0其实说起来并不难，只是稍微有点麻烦点，前期准备时间有点多，但是相对，这样提升了网站的打开速度。
感谢分享.就是看不懂 icon啊，试试，不错加热心 纯音Halo 发表于 2016-12-6 14:26
感谢分享.就是看不懂
就是把一些图标用代码调用出来，不用图片0.....0 GreyChroma 发表于 2016-12-6 14:42
icon啊，试试，不错加热心
谢谢0...0 公司项目一直用Glyphicons 感觉不错...不过没太看懂! 还是习惯雪碧图的方法
页:
[1]