旗下品牌:
石家庄网站开发 石家庄网站开发公司

资讯动态

察而思、思而行、行而后语、知行合一

图标库代替图片的方法

发布时间:2020-01-23 热度:

   网站过多的图片引起网站打开速度的缓慢,这时候就要想办法解决问题,一个是压缩图片,但是过量的的压缩又会引起图片的模糊,而一些形状之类的图片完全可以用css或者字体实现,一些形状我已经在之前的博客里写了出来,这里讲的是用图标库的方法来代替图片;下面石家庄做网站的技术人员给大家分享具体内容。

  这里我用的是阿里的图标库,官方链接:http://www.iconfont.cn/

  1.准备时间:

  1-1进入网站,选择图标库

图标库代替图片的方法

  1-2选择你需要的图标,比如这个错误图标(或者在上方搜索处搜索你想要的图标,再或者你可以用AI做一个图标上传到项目{相对更麻烦})

图标库代替图片的方法

  1-3鼠标悬浮上去,出现一个购物车,点击

图标库代替图片的方法

  这时候就会进入平常在淘宝类似买东西的一个购物车

图标库代替图片的方法

  1-4点击右上方“购物车”

图标库代替图片的方法

  1-5这里是你选择的图标们,然后添加至项目,

  可以选择你拥有的项目,

图标库代替图片的方法

  或者点击添加新项目。

  进入项目,这时候就会发现你的项目里面多出了你的创建的东西:

图标库代替图片的方法

  2,使用时间:

  2-1.然后选择下载至本地,将这三个图标形成的库下载下来(相对而言,图标越多,相对你比使用图片效果更强,加载更快。)

  解压你下载的图片。

图标库代替图片的方法

图标库代替图片的方法

  2-2然后打开文件。出来的代码

图标库代替图片的方法

  这四个是必须引用的,

图标库代替图片的方法

  这三个是引用方式的介绍及使用方法;

图标库代替图片的方法

  这两个是你引用的方式js或者css(只选择一个);

  这里我要说的是css的适用方法:

图标库代替图片的方法

  将五个文件放入你的css里面:

  2-3打开你的项目:

图标库代替图片的方法

  2-4引入css样式;

  查看库里面的文件是否用上,如果不确定,可以自己重新用编译器的提示引一遍。

图标库代替图片的方法

  用浏览器打开下载项目里面的css提示文件,并用F12审查

图标库代替图片的方法

  2-5将你需要的图标的class名复制到你的项目里面

图标库代替图片的方法

  用浏览器打开查看效果:

图标库代替图片的方法

  2-6你可以再单独写样式图标变色或者变大,如果怕冲突,可以再给div加一个id值

图标库代替图片的方法

图标库代替图片的方法

  是不是就可以了,如果你不想要div里面的字变色,可以直接写id:before,因为字体库就是用的before

  好了,这就是石家庄做网站的小编给大家讲解的阿里图标库的使用方法了,其实说起来并不难,只是稍微有点麻烦点,前期准备时间有点多,但是相对,这样提升了网站的打开速度。

联系尚武科技
客户服务
石家庄APP开发
400-666-4864
为您提供售前购买咨询、解决方案推荐等1V1服务!
技术支持及售后
石家庄APP开发公司
0311-66682288
为您提供从产品到服务的全面技术支持 !
客户服务
石家庄小程序开发
石家庄小程序开发公司
加我企业微信
为您提供售前购买咨询、
解决方案推荐等1V1服务!
石家庄网站建设公司
咨询相关问题或预约面谈,可以通过以下方式与我们联系。
石家庄网站制作
在线联系:
石家庄Web开发
石家庄软件开发
石家庄软件开发公司
ADD/地址:
河北·石家庄
新华区西三庄大街86号河北互联网大厦B座二层
Copyright © 2008-2025尚武科技 保留所有权利。 冀ICP备12011207号-2 石家庄网站开发冀公网安备 13010502001294号《互联网平台公约协议》
Copyright © 2025 www.sw-tech.cn, Inc. All rights reserved