关于图标的使用

现在很多小图标都用到了字体库，例如：Font Awesome（ fontawesome.dashgame.com/ ），好处就是保证图标不失真，还可以随意改变图标的颜色以及大小。做移动端的时候，一般图标建议用字体库或者svg，如果图片是图片，可能在不同分辨率的手机下，图标可能会有锯齿甚至模糊，字体库的图标大小可以用font-size来控制。
一、Font Awesome

Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

使用方法：
只需要引入font-awesome.min.css

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

二、阿里巴巴矢量图标库（www.iconfont.cn）
阿里巴巴矢量图标库里的图标比较丰富，我们可以直接下载svg/AI/png，也可以下载代码。
下载代码：
1、选择图标，加入购物车
在这里插入图片描述
2、打开右上角的购物车

3、下载代码

4、将下载好的压缩包解压，并放入项目里

5、引入iconfont.css，

6、挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xf0050;</i>

字体编码可以打开在这里插入图片描述

查看。
三、若有一些比较特殊的都图标可以找设计师要svg格式的图片，转化为代码，网址：https://icomoon.io
1、打开网址

2、选择svg格式的图片，并选择图标

3、下载

可以自定义图标的名字，页面引用的时候，添加的类名需加前缀"icon-"
在这里插入图片描述
以上。

end

猜你喜欢