1. <img>
.psd 设计稿
用Photoshop打开 .psd 设计稿文件，选中目标图层，右键选中 Duplicate Layer 复制图层，选择 Document:New 在新文件中打开图层，Image > Trim，Image > Canvas Size 设置画布大小，File > Export > Quick Export as PNG 导出为 .png
.png设计稿
用Photoshop打卡 .png 设计稿，选中一个icon，Image > Crop 剪切目标 icon， 选择魔法棒 Magic Wand tool，按住 shift 选择 icon，右键选择 Select Inverse，delete 删除多余区域，deselect 取消选择，Image > Canvas Size 设置画布大小，File > Export > Quick Export as PNG 导出为 .png
<img src=".svg/.png" alt="">
优点：图片默认能够保持比例，只要不同时设置宽和高，能够自适应宽高
2. CSS background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.icons > .icon {
display:inline-block;
width:100px;
height:100px;
background: red url(./xxx.png) no-repeat 0 0;
}
.icons > .icon.weibo{
background-image:url(./icons/weibo.png)
}
.icons > .icon.qq{
background-image:url(./icons/qq.png)
}.icons > .icon.wechat{
background-image:url(./icons/wechat.png)
}
</style>
</head>
<body>
<div class="icons">
<div class="icon weibo"></div>
<div class="icon qq"></div>
<div class="icon wechat"></div>
</div>
</body>
</html>
3. CSS Sprites
https://css.spritegen.com/
把一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染同一张图片，只是展示的位置不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.icon-weibo, .icon-qq, .icon-wechat{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.icon-weibo { background-position: -0px -0px; width: 261px; height: 200px; }
.icon-qq { background-position: -0px -200px; width: 200px; height: 200px; }
.icon-wechat { background-position: -0px -400px; width: 200px; height: 200px; }
</style>
</head>
<body>
<div class="icons">
<div class="icon-weibo"></div>
<div class="icon-qq"></div>
<div class="icon-wechat"></div>
</div>
</body>
</html>
4. iconfont
๡x这一字段是HTML实体，但是不表示任何字符，因此可以把这一字段的字符做成 icon 的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
@font-face {
font-family: 'iconfont'; /* project id 2228739 */
src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot');
src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff') format('woff'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.svg#iconfont') format('svg');
}
</style>
</head>
<body>
<div class="icons" style="font-family:iconfont">
<div class="icon-weibo"></div>
<div class="icon-qq"></div>
<div class="icon-wechat"></div>
</div>
</body>
</html>
CSS 伪元素中展示转义 icon 字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
@font-face {
font-family: 'iconfont'; /* project id 2228739 */
src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot');
src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff') format('woff'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.svg#iconfont') format('svg');
}
.icon-weibo::before{
content:'\e618'
}
.icon-qq::before{
content:"\e612"
}
.icon-wechat::before{
content:"\e640"
}
</style>
</head>
<body>
<div class="icons" style="font-family:iconfont">
<div class="icon-weibo"></div>
<div class="icon-qq"></div>
<div class="icon-wechat"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2228739_y0al4xoqfre.css">
</head>
<body>
<div class="icons" style="font-family:iconfont">
<div class="icon-weibo"></div>
<div class="icon-QQ"></div>
<div class="icon-wechat"></div>
</div>
</body>
</html>
>CSS 伪元素中展示转义 icon 字符
5. SVG 法
第一步：拷贝项目下面生成的symbol代码
第二步：加入通用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-xxx"></use>
</svg>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<style>
.icon-food-strawberry{
width:100px;height:100px;
}
.icon-zhawanzi{
width:100px;height:100px;
}
</style>
<script src="//at.alicdn.com/t/font_2228739_263z4pxhpd4.js"></script>
</head>
<body>
<svg class="icon icon-food-strawberry" aria-hidden="true">
<use xlink:href="#icon-food-strawberry"></use>
</svg>
<svg class="icon icon-zhawanzi" aria-hidden="true">
<use xlink:href="#icon-zhawanzi"></use>
</svg>
</body>
</html>
6. CSS 法
https://cssicon.space/#/ 由纯css代码制成的图标集
网友评论