首先,备忘一些常用的图标、图片、字体网站
图标icon库:
iconfont阿里巴巴矢量库https://www.iconfont.cn/
font-Awesome Icon库 http://fontawesome.dashgame.com/
字体:
Athum Font:https://www.dafont.com/athum.font
图片库:
千库图:https://588ku.com/image/jingya.html
gif动图制作:http://www.gif5.net/
做项目的时候,总是不时的要插入小图标,以前都是下载好图片,然后以img标签的形式插入。后来发现这种方式太麻烦了,而且占用的空间资源较多。
通过阿里巴巴图库(https://www.iconfont.cn/)IconFont方式引入图标,可以像使用字体一样使用图标。优点主要包括:
(1)轻量性:一个图标字体比一系列的图像要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。
(2)灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。
(3)兼容性:网页字体支持所有现代浏览器,包括IE低版本。
总之,不仅轻量,而且便于调整图标颜色大小等样式;缺点是图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用。
项目中使用到的小图标可以集中下载后,引入到项目中。具体方式如下:
(1)https://www.iconfont.cn/登录自己的账号
(2)搜索图标,加入购物车,全部图标加入购物车完毕后点击购物车,添加至相应的项目
(3)下载项目至本地
(4)解压,将以下文件拷贝至项目目录 css-》iconfont 目录中
(5)在页面中引入图标css文件,注意写对引用路径。
<link rel="stylesheet" href="./css/iconfont/iconfont.css">
在vue项目中,直接在【main.js】文件中【import './assets/iconfont/iconfont.css'】即可。
(6)使用图标
//使用span或者i标签
<span class="iconfont"> </span>
<i class="iconfont"> </i>
关于使用方法,也可以参考下载文件中的demo_index.html