整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
web开发中，我们经常要用到一些小图标（加减勾叉等）。通常做法就两种：
1、直接使用图片；
2、使用css/svg直接在浏览器中绘制图标；
方案1
由于图标图片比较多，而且体积很小，为了减少请求，我们需要用雪碧图将图标拼凑在同一张图片里面，修改维护十分麻烦！
现在比较好的方案是使用webpack引入图片，小图直接转换成base64插入css中。直接使用图片比较简单，这也是目前比较主流的做法。
● 方案2
相比方案1，明显可以减小资源的体积，只需要几条css/svg命令就可以绘制出精美的图标，而且不受图片尺寸限制，可大可小非常灵活。
初看方案2的一堆代码可能会觉得非常难，但其实很多简单的图标都是非常容易实现的。
接下来就是同学们最期待的小智手把手教学时间啦。
01 暂停按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>02 加号按钮
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -35px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>03 关闭按钮
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>04 菜单按钮
用阴影实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪实现
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用渐变函数实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>05 文章图标
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>06 单选按钮
.box{
width:0;
color: #000;
border: 3px solid black;
outline: 6px dotted ;
outline-offset: 6px;
}
.box{
width:0;
padding: 3px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}
.box{
height: 6px;
width: 6px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}07 靶子图标
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}08 田字图标
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}09 下载箭头
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}10 下载箭头（带横线）
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}11 禁用图标
可以看作一种特殊字体，其展示的是图标，而不再是文字，其拥有字体的特性，比如大小、颜色、透明效果、阴影等，字体图标加载快、不变形。也可以看作是矢量格式的图标。
（1）iconmoon字体图标库：https://icomoon.io/app
（2）阿里iconfont字体图标库：https://www.iconfont.cn/
（3）font-awesome字体图标库：
以iconmoon为例
（1）选择需要的图标并下载
1）在fonts文件夹下有四种类型的字体文件，每种字体文件兼容浏览器的种类不同
a）.tff格式（TrueTypeFont），美国苹果公司和微软公司共同开发的，在Windows和Mac操作系统中为默认字体；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。
b）.woff格式（Web Open Font Format-Web开放字体格式），是一种网页所采用的字体格式标准，使用zlib压缩，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微软设计用来在网页使用的字体格式，是OpenType字体的压缩格式，IE专用，IE4+支持该字体。
d）.svg格式（Scalable Vector Graphics-可缩放的矢量图形），它是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。
其他字体
e）.otf格式（Open Type Font），Microsoft和Adobe公司开发的，.otf格式比.ttf更为强大，可以把PostScript字体嵌入到TrueType中。
2）字体转换
https://www.fontke.com/tool/convfont/
（2）字体图标的引入
1）把字体放到项目的相应位置
将下载解压后的fonts文件夹放到项目路径下
2）在html页面中引入字体
利用CSS的@font-face属性，引入外部字体；
在style.css文件中有如下代码，为固定用法，注意url中字体路径，其它可以不变。
在html的style标签中引入如下代码：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）为元素用该字体
span {
font-family: "icomoon";
}4）为元素添加内容
复制demo.html中需要的图标，如下，将其作为元素的内容。
<span>?</span> （3）新增字体图标的引入
当利用iconmoon选用字体图标时，如果有新增的字体图标需要加入，则需要用到.json文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。
在进行前端开发时，图标库的使用是一项必须掌握的技巧，目前流行的图标库有fontawesome，iconfont等，只需要引入到项目中，然后使用对应的class，就会得到对应的图标。
但是你们有没有想过，如果是自己的话该怎么去实现这些图标呢？今天我们就来看看一些稍微复杂的图标是如何使用纯CSS3实现吧。
文中的代码已经放到github上了，感兴趣的同学自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我们可以先来看看稍微复杂的图标的样子。
图标库
从图标中可以看出，都是平时很常用的正确，错误，方向键，放大，缩小，开锁，解锁等。
我们从中抽取几个，慢慢分析它们是如何实现的吧。
水杯的图标如下所示。
水杯图标
我们对水杯图标进行拆分，分为杯身和杯柄两个部分。
杯身中的白色长方形就是一个div，设置宽度和高度。
杯身的四周为黑色都是通过border实现，border-bottom比其他三个放向都要大。
杯身的下方是圆角，通过border-radius设置，border-radius的右下和左下方向设置相同的值。
通过上述的分析，我们可以得到杯身部分的CSS代码。
杯身CSS代码
杯柄通过伪元素:before实现。
杯柄设置为绝对定位，修改right值让中间出现一个空白。
调整杯柄位置的宽度，只需要和杯身重叠即可。
杯柄右上角和右下角的border-radius设置为特定的值，展现成圆角的样子。
通过以上的分析，我们可以得到杯柄部分的CSS代码。
杯柄CSS代码
首先我们来看看心形图案的样子。
心形图案
接下来我们同样将整个图案拆分来看，分成左右两个部分，我们将上述图案换成两种不同颜色就一目了然了。
拆分图案
从图案中可以看出，它实际是由两个相同的图行旋转不同的角度构成，相同的元素部分，可以通过设置border-radius值来实现。
我们将左右两个半边的形状分别通过:before和:after来实现，原始的的div形状的CSS属性则很简单，只需要设置相对位置和宽度为0即可。
基本CSS属性
然后看看:before和:after共有的属性，主要是保证为元素部分的定位为绝对定位，然后设置border-radius的值， 保证上半部分是圆角。
共有CSS属性
然后是关键的两半边各自的CSS属性。左侧的图形距左边应该为0，所以left: 0，右侧的图形距右侧为0，所以right: 0。
各有的CSS属性
同时左右两侧图案需要进行旋转，这里我们选择旋转48度，这是为什么呢？
很多人一下子可能会想到旋转45度，我们来看看旋转45度时的样子。
旋转45度
从图形中可以看出，两侧有棱角，整个图案就显得不标准，当旋转超过45度时，棱角的部分就会被里面的图案遮住。
所以这里我们选择旋转48度，达到最终的效果。
最终效果图
今天这篇文章我们使用纯CSS3的属性画出了一个杯子和心形两个稍微复杂点的图案，其实其它图案也是类似的，只要我们能将其拆分，每个部分独立实现，再组合就可以达到图标库的效果了。
大家也可以自己动手实现一下噢~
*请认真填写需求信息，我们会在24小时内与您取得联系。
