CSS实现小图标

NusterCache 发布于2019-08-30 15:53 / 2834人阅读

摘要：关闭图标箭头图标右箭头左箭头下箭头上箭头三角形下三角上三角右三角左三角

关闭图标

.close {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.close:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  width: 12px;
  border-top: 1px solid #ffffd;
  transform: rotate(45deg);
}
.close:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  width: 12px;
  border-top: 1px solid #ffffd;
  transform: rotate(-45deg);
}

箭头图标

右箭头

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffd;
  border-right: 1px solid #ffffd;
  transform: rotate(45deg);
}

左箭头

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #ffffd;
  border-left: 1px solid #ffffd;
  transform: rotate(45deg);
}

下箭头

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #ffffd;
  border-bottom: 1px solid #ffffd;
  transform: rotate(45deg);
}

上箭头

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffd;
  border-left: 1px solid #ffffd;
  transform: rotate(45deg);
}

三角形

下三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  top: 2px;
  display: inline-block;
  border-top: 4px solid #ffffd;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}

上三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  bottom: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #ffffd;
  border-left: 4px solid transparent;
}

右三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  left: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #ffffd;
}

左三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  right: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid #ffffd;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}

GPU云服务器云服务器 CSS图标库 CSS.GG图标库小图标背景小图标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116645.html

浅谈 CSS Sprites 雪碧图应用

摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...

MkkHou 2019-08-30 13:12 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
css.gg – 一款免费开源CSS库实现700+图标应用前端项目

摘要：支持等格式调用的图标，图标数调用基本上满足我们大部分的项目需要的小图标。范例以上是部分的应用，如果我们需要用到前端业务中，可以根据需要选择以前我们在开发前端WEB端的时候，如果需要用到小图标是不是需要让美工设计小图标然后调用。这样不仅仅效率低下，而且会影响到我们前端的速度和管理效率。于是如今我们在使用前端小图标的时候都会引用第三方JS、图标库，在这篇文章中老蒋要介绍的是CSS.GG纯CSS代...

shadowbook 2021-09-23 11:57 评论0 收藏0
CSS进阶篇--fontAwesome代替网页icon小图标

摘要：网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用，包括固定宽度浮动反转旋转叠加图标等。引言奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小，颜色，阴影。网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标...

paney129 2019-08-28 18:18 评论0 收藏0
使用css实现全兼容tooltip提示框

摘要：在上一篇中，使用实现了一个全兼容的三角形图标，这个三角型图标可以使用于多种场景，比如下拉图标多级菜单等，这篇我们使用这个图标通过纯来实现一个我们常见的提示框。 [toc] 在上一篇post中，使用css实现了一个全兼容的三角形图标，这个三角型图标可以使用于多种场景，比如下拉图标、多级菜单等，这篇post我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框。最终效果图：...

MSchumi 2019-08-28 17:55 评论0 收藏0
使用css实现全兼容tooltip提示框

摘要：在上一篇中，使用实现了一个全兼容的三角形图标，这个三角型图标可以使用于多种场景，比如下拉图标多级菜单等，这篇我们使用这个图标通过纯来实现一个我们常见的提示框。 [toc] 在上一篇post中，使用css实现了一个全兼容的三角形图标，这个三角型图标可以使用于多种场景，比如下拉图标、多级菜单等，这篇post我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框。最终效果图：...

Hegel_Gu 2019-08-21 12:20 评论0 收藏0