前端中的icon几种用法

icon 的5种用法

icon有5种常用的用法：

1. img 用法
2. background 用法
3. background 一张图（CSS sprite 雪碧图）
4. font 字体
5. SVG

切图

制作 icon ，首先需要素材，这时候就要用到 Photoshop 了。 素材一般有两种：

1. PSD格式
2. PNG格式

PSD格式切图

这里我已经准备好了 PSD格式的素材，直接用 Photoshop 打开就可以了。

现在我们的任务就是要把图中的4个 icon 切出来。 步骤：

1. 选中图层 点击上图中箭头指向的按钮，选择移动工具。 然后将鼠标移至要切出来的图像，点击左键。 可以看到图片右边箭头指向了一个图层，现在将该图层的锁定按钮关掉。 可以看到，QQ 图标不见了，说明这个图层就是我们想要切出来的图层。 这时候就已经选中了这个图层了。
2. 复制图层 鼠标右键点击选中的图层，选择复制图层 将弹出的选框中目标文档改为新建 在新生成的文件中选择图像，再点击图片下方的裁切，在弹框中选确定 在这里可以选择图像=》画布大小调整图片大小 这时候就可以看到切出来的图片了，由于是白色的图片，所以有点模糊，加个黑色背景填充吧
3. 保存图片 点击文件，再点击导出，选择右侧导出为PNG，存储起来就可以了

接下来按照同样的方式将4个 icon 都切下来。

这就是切下来的4个icon素材了。

PNG格式切图

我已经提前将图标转为 PNG 格式了

步骤：

1. 新建一个文档，用来存放切出来的 icon
2. 将内容切出来 使用选框工具选中要切出来的内容 再切换魔棒工具 右键减去不要的内容 选择移动工具 使用移动工具将切出来的内容拉到新建的文档 裁切一下，图片就切完了。
3. 按照PSD格式切图的保存方式将图片保存下来。

切图收工。

1. img 用法

img 用法就是指直接将 icon 作为图片插入到页面中。

HTML

"icons">
	"./net.png">
	"./qq.png">
	"./twitter.png">
	"./weibo.png">

复制代码

显示效果

img用法的好处：

• 图片可以适应 img 的大小调整
• 简单

img用法的坏处：

• 图片过多，影响性能
• img 标签不利于语义化
• img 的大小设置可能使图片适应而变形，不好看。

2. background 用法

background用法就是将图片作为元素的background来插入。

HTML

"icons">
	
"icon qq">
	
"icon weibo">
	
"icon twitter">
	
"icon net">
	

复制代码

CSS

.icon{border: 1px solid red;display: inline-block;width: 24px;height: 25px;}
.qq{background: transparent url(./qq.png) no-repeat 0 0;}
.weibo{background: transparent url(./weibo.png) no-repeat 0 0;}
.twitter{background: transparent url(./twitter.png) no-repeat 0 0;}
.net{background: transparent url(./net.png) no-repeat 0 0;}
复制代码

显示效果

3. background 一张图（CSS sprite 雪碧图）

Sprite图原理：使用 background-position 属性调整背景图的位置，使想要呈现的图像呈现出来，其余的隐藏。 通过Sprite生成器可以将多张图片合成一张，并且生成所需代码。

步骤：

1. 上传图片
2. 选择生成图片格式
3. 填写 CSS 前缀
4. 选择图片间距
5. 点击生成
6. 保存 右键点击图片，将图片保存下来

Sprite 图使用

HTML

"icons">
	
"icon qq">
	
"icon weibo">
	
"icon twitter">
	
"icon net">
	
	
复制代码

CSS

.icon{ display: inline-block; width:30px; height: 30px; background: url('./sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.net { background-position: -0px -0px; width: 30px; height: 30px; }
.qq { background-position: -30px -0px; width: 30px; height: 30px; }
.twitter { background-position: -0px -30px; width: 30px; height: 30px; }
.weibo { background-position: -30px -30px; width: 30px; height: 30px; }
复制代码

显示效果

4. font字体

font字体使用分为两种情况：

• 作为字体直接在HTML中使用
• 在CSS中使用 font字体需要用到一个神器的网站，点击它. 由于阿里巴巴矢量图库上传图标需要SVG格式，避免麻烦就不用自己的图标了。我们直接从图标库中添加图标，步骤如下：

1. 在搜索框中搜索图标，点击添加进购物车
2. 点击页面右上角购物车图标，将购物车中的图标添加进一个项目
3. 项目生成完成

字体使用

1. 选中Unicode，点击生成代码
2. 复制代码，将代码粘贴至样式表最前面 这时候，图标就已经变成了一个字体了。我们可以像正常使用字体那样使用它。
3. 示例

HTML

	"iconfont">
			
			
			
	

复制代码

CSS

复制代码

显示效果

阿里巴巴矢量图标库使用说明

CSS使用

1. 将生成代码的链接作为CSS外部样式表的链接插入文档
2. 挑选相应图标并获取类名，应用于页面
3. 效果 因为本质上还是使用字体，所以依然可以通过操作.iconfont类来对字体样式进行修改。

5. SVG使用

SVG使用依然是使用阿里巴巴矢量图标库 步骤：

1. 第一步依然是复制代码，不过这回是 JavaScript 链接 /
2. 加入通用css代码（引入一次就行）

复制代码

3. 挑选相应图标并获取类名，应用于页面

"true">
    "#icon-QQ">

复制代码

4. 示例

HTML

"true">
	"#icon-QQ">

复制代码

JS

显示效果

SVG使用的好处：

• 可以使用彩色图标
• 调整SVG的width和height调整大小
• 目前推荐使用的方法。