摘要：用画了三个图标，叉号，排行符号，搜索符号。我们用和伪类来分别当一个矩形框，然后进行旋转即可得到叉号。我们用添加类的形式插入叉号，当我们需要插入叉号时，我们额外添加一个标记，并添加类。方便相对于父元素进行定位第二步，设置伪类，画叉号。
用CSS画了三个图标，叉号，排行符号，搜索符号。先上效果图啦啦啦。
附上CodePen链接，点我点我
思路用叉号举例哈。叉号可以看作两个互相垂直的矩形框。矩形框可以用width和height和backgrond-color来表现，也可以用height和border-left和border-right和border-color来表现。我们用::before和::after伪类来分别当一个矩形框，然后进行旋转即可得到叉号。
我们用添加类的形式插入叉号，当我们需要插入叉号时，我们额外添加一个标记，并添加类icon-cross。
第一步，设置图标尺寸。
.icon-cross{
width: 20px;
height: 20px;
position: absolute; /*方便相对于父元素进行定位*/
}
第二步，设置伪类，画叉号。
.icon-cross::before,
.icon-cross::after{
content: "";
position: absolute; /*方便进行定位*/
height: 16px;
width: 1.5px;
top: 2px;
right: 9px; /*设置top和right使图像在20*20框中居中*/
}
.icon-cross::before{
transform: rotate(45deg); /*进行旋转*/
}
.icon-cross::after{
transform: rotate(-45deg);
}
为了让矩形框有一定圆角好看点，可在伪类样式中追加border-radius: 1px;。另外，为了使20*20的框能在父元素中垂直居中，我们给.icon-cross追加样式top: 50%; margin-top: -10px;。上边距为父元素高度的50%，然后再上移10px，这样就垂直居中了哦。（10px为自身高度一半。如果图标高度是18px，那么就是上移9px。）
要设置在父元素中的水平位置，可设置left或right。
为了能根据父元素进行定位，父元素务必position:relative||absolute;。
还要注意一点，由于我们没有设置background-color，所以这时候是还啥都看不到。我喜欢在插入图标时，再另外设置背景颜色，这样可以在不同地方反复插入这个图标，并分别设置不同的颜色。当然，你也可以设置一个颜色作为默认值。
具体的插入图标示例见开头的CodePen吧。
补充：我个人比较喜欢用border来当色块啦，这样可以设置伪元素border-color: inherit;，然后直接设置类的边框颜色就行了。如果是用width和height来当色块的话，就只能多带带设置伪类的background-color，觉得麻烦。但是用border来做的话，IE11和Edge在网页缩放时有时候会在中间多一条缝..很丑陋..
附上CSS图标库代码。（现在只有三个图标哈哈）
/*----图标大小为20px*20px，已经设置好在父元素中垂直居中，
只需另外设置left或者right来调整水平位置----*/
/*----通用设置----*/
[class|=icon]{ /*所有类名以“icon-”开头的*/
width: 20px;
height: 20px;
top: 50%; /*上边距为父元素50%*/
margin-top: -10px; /*再往上移动自身高度一半，就垂直居中了*/
position: absolute; /*有些图标高度不是20px，那么margin-top要多带带设置*/
}
[class|=icon]::before, /*所有类名以“icon-”开头的伪元素*/
[class|=icon]::after{
content: "";
position: absolute;
height: 0;
width: 0;
}
/*---------叉号---------*/
.icon-cross::before,
.icon-cross::after{
height: 16px;
width: 1.5px;
top: 2px;
right: 9px; /*设置right和top使叉号居中*/
border-radius: 1px;
}
.icon-cross::before{
transform: rotate(45deg);
}
.icon-cross::after{
transform: rotate(-45deg);
}
/*----------排行榜----------*/
.icon-ranklist,
.icon-ranklist::before,
.icon-ranklist::after{
width: 4px;
border-radius: 1px;
}
.icon-ranklist::before,
.icon-ranklist::after{
bottom: 0;
background: inherit;
}
.icon-ranklist{
height: 18px;
margin-top: -9px;
margin-left: 8px;
margin-right: 8px; /*这样排行榜图标宽度可以当作20px*/
}
.icon-ranklist::before{
height: 12px;
left: -6px;
}
.icon-ranklist::after{
height: 10px;
right: -6px;
}
/*----------搜索图标----------*/
.icon-search::before{
height: 12px;
width: 12px;
border-radius: 12px;
border: 2px solid;
top: 1px;
left: 1px;
border-color: inherit;
}
.icon-search::after{
height: 7px;
border-left: 1.5px solid;
border-right: 1.5px solid;
border-radius: 1.5px;
right: 3px;
bottom: 0px;
transform: rotate(-45deg);
border-color: inherit;
}
存在的问题
最近才发现的，网页缩放后，图标会有些变形，比如叉号会一根线长点另一根线短点，只有在100%大小时才能完全是你想要的效果，哭...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115404.html
摘要：方案由于图标图片比较多，而且体积很小，为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到，一堆图标的雪碧图，修改维护会相当麻烦现在比较好的方案是使用引入图片，小图直接转换成插入中。 来，干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库：iconoo，所以，开门见山，star吧少年少妇们！（这样的我是不是应该要加个github互粉的团伙了？...
摘要：方案由于图标图片比较多，而且体积很小，为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到，一堆图标的雪碧图，修改维护会相当麻烦现在比较好的方案是使用引入图片，小图直接转换成插入中。 来，干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库：iconoo，所以，开门见山，star吧少年少妇们！（这样的我是不是应该要加个github互粉的团伙了？...
摘要：说到这里，大家该明白了上面的三角形图标是怎么来的了吧元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。所以，如果我们要做倒立三角形向右的或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。 原文 http://itindex.net/detail/487...三角形-图标 网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的（之前淘...
摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。 背景 一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...
摘要：网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用，包括固定宽度浮动反转旋转叠加图标等。 引言 奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标...
阅读 2079·2021-11-16 11:39
阅读 1305·2021-11-12 10:35
阅读 3388·2021-08-31 09:39
阅读 1667·2019-08-30 13:14
阅读 2667·2019-08-30 13:02
阅读 2642·2019-08-29 13:22
阅读 2138·2019-08-26 13:54
阅读 617·2019-08-26 13:45
