前端小白引用字体图标icon及图片资源

首先，备忘一些常用的图标、图片、字体网站

图标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/ 

                      http://gif.55.la/

做项目的时候，总是不时的要插入小图标，以前都是下载好图片，然后以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"> &#xe616;</span>
 <i class="iconfont"> &#xe637;</i>

 

关于使用方法，也可以参考下载文件中的demo_index.html