五种图标用法详解-优快云博客

icon 的5种用法

icon有5种常用的用法：

img 用法
background 用法
background 一张图（CSS sprite 雪碧图）
font 字体
SVG

切图

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

PSD格式
PNG格式

PSD格式切图

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

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

选中图层

点击上图中箭头指向的按钮，选择移动工具。然后将鼠标移至要切出来的图像，点击左键。

可以看到图片右边箭头指向了一个图层，现在将该图层的锁定按钮关掉。

可以看到，QQ 图标不见了，说明这个图层就是我们想要切出来的图层。这时候就已经选中了这个图层了。
复制图层鼠标右键点击选中的图层，选择复制图层

将弹出的选框中目标文档改为新建

在新生成的文件中选择图像，再点击图片下方的裁切，在弹框中选确定

在这里可以选择图像=》画布大小调整图片大小

这时候就可以看到切出来的图片了，由于是白色的图片，所以有点模糊，加个黑色背景填充吧
保存图片点击文件，再点击导出，选择右侧导出为PNG，存储起来就可以了

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

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

PNG格式切图

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

步骤：

新建一个文档，用来存放切出来的 icon
将内容切出来使用选框工具选中要切出来的内容

再切换魔棒工具

右键减去不要的内容

选择移动工具

使用移动工具将切出来的内容拉到新建的文档

裁切一下，图片就切完了。
按照PSD格式切图的保存方式将图片保存下来。

切图收工。

1. img 用法

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

HTML

<div class="icons">
	<img src="./net.png">
	<img src="./qq.png">
	<img src="./twitter.png">
	<img src="./weibo.png">
</div>
复制代码

显示效果

img用法的好处：

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

img用法的坏处：

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

2. background 用法

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

HTML

<div class="icons">
	<div class="icon qq"></div>
	<div class="icon weibo"></div>
	<div class="icon twitter"></div>
	<div class="icon net"></div>	
</div>
复制代码

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生成器可以将多张图片合成一张，并且生成所需代码。

步骤：

上传图片
选择生成图片格式
填写 CSS 前缀
选择图片间距
点击生成
保存右键点击图片，将图片保存下来

Sprite 图使用

HTML

<div class="icons">
	<div class="icon qq"></div>
	<div class="icon weibo"></div>
	<div class="icon twitter"></div>
	<div class="icon net"></div>	
</div>	
复制代码

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格式，避免麻烦就不用自己的图标了。我们直接从图标库中添加图标，步骤如下：

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

字体使用

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

HTML

<body>
	<span class="iconfont">
			&#xe65c;
			&#xe619;
			&#xe643;
	</span>
</body>
复制代码

CSS

<style>
	@font-face {
		font-family: 'iconfont';  /* project id 505367 */
		src: url('//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.eot');
		src: url('//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.eot?#iefix') format('embedded-opentype'),
		url('//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.woff') format('woff'),
		url('//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.ttf') format('truetype'),
		url('//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.svg#iconfont') format('svg');
	}
	.iconfont{
		font-family:"iconfont" !important;
		font-size: 100px;
	}
</style>
复制代码

显示效果

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

CSS使用

将生成代码的链接作为CSS外部样式表的链接插入文档 <link rel="stylesheet" href="//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.css">
挑选相应图标并获取类名，应用于页面 <span class="iconfont icon-QQ"></span>
效果

因为本质上还是使用字体，所以依然可以通过操作.iconfont类来对字体样式进行修改。

5. SVG使用

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

第一步依然是复制代码，不过这回是 JavaScript 链接 / <script src="//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.js"></script>
加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
复制代码

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

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-QQ"></use>
</svg>
复制代码

示例

HTML

<svg class="icon" aria-hidden="true">
	<use xlink:href="#icon-QQ"></use>
</svg>
复制代码

JS

<script src="//at.alicdn.com/t/font_505367_1xd09i3l98xs9k9.js"></script>

显示效果

SVG使用的好处：

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

前端中的icon几种用法

icon 的5种用法

切图

PSD格式切图

PNG格式切图

1. img 用法

HTML

显示效果

2. background 用法

HTML

CSS

显示效果

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

Sprite 图使用

HTML

CSS

显示效果

4. font字体

字体使用

HTML

CSS

显示效果

CSS使用

5. SVG使用

HTML

JS

显示效果