icon 的5种用法
icon有5种常用的用法：
- img 用法
- background 用法
- background 一张图（CSS sprite 雪碧图）
- font 字体
- SVG
切图
制作 icon ，首先需要素材，这时候就要用到 Photoshop 了。
素材一般有两种：
- PSD格式
- PNG格式
PSD格式切图
这里我已经准备好了 PSD格式的素材，直接用 Photoshop 打开就可以了。
现在我们的任务就是要把图中的4个 icon 切出来。
步骤：
-
选中图层
image.png
点击上图中箭头指向的按钮，选择移动工具。
然后将鼠标移至要切出来的图像，点击左键。
image.png
可以看到图片右边箭头指向了一个图层，现在将该图层的锁定按钮关掉。
可以看到，QQ 图标不见了，说明这个图层就是我们想要切出来的图层。
这时候就已经选中了这个图层了。 -
复制图层
鼠标右键点击选中的图层，选择复制图层
image.png
将弹出的选框中目标文档改为新建
image.png
在新生成的文件中选择图像，再点击图片下方的裁切，在弹框中选确定
image.png
在这里可以选择图像=》画布大小调整图片大小
这时候就可以看到切出来的图片了，由于是白色的图片，所以有点模糊，加个黑色背景填充吧
image.png -
保存图片
点击文件，再点击导出，选择右侧导出为PNG，存储起来就可以了
导出
接下来按照同样的方式将4个 icon 都切下来。
这就是切下来的4个icon素材了。
PNG格式切图
我已经提前将图标转为 PNG 格式了
步骤：
-
新建一个文档，用来存放切出来的 icon
新的文档 -
将内容切出来
使用选框工具选中要切出来的内容
image.png
再切换魔棒工具
image.png
右键减去不要的内容
减去
选择移动工具
image.png
使用移动工具将切出来的内容拉到新建的文档
image.png
裁切一下，图片就切完了。 - 按照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图 -
保存
右键点击图片，将图片保存下来
保存
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">



</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调整大小 - 目前推荐使用的方法。
