css版图标，免图片加载

CSS可以通过使用伪元素、边框、背景等属性来绘制图标。例如，使用伪元素（::before 和 ::after）来绘制图标，使用边框border-radius来绘制图标，使用背景background来绘制图标。

这里提供最常用的icon图标，上下左右等等指示图标，免图片加载，直接css绘制。

出自：passer-by.com

返回工具箱首页

示例：class默认属性 fancy-icon + 图表属性名 icon-home

  • icon-home
  • icon-search
  • icon-plus
  • icon-minus
  • icon-cancel
  • icon-checkmark
  • icon-menu
  • icon-download
  • icon-arrow-top
  • icon-arrow-bottom
  • icon-arrow-left
  • icon-arrow-right
  • icon-point-top
  • icon-point-bottom
  • icon-point-left
  • icon-point-right

说明：将下方代码添加到样式文件中

  1. /* icon */  
  2. .fancy-icon{position:relative;display:inline-block;width:1em;height:1em;font-size:20px;color:currentColor}  
  3. .icon-home:before{content:'';position:absolute;top:0;left:0;display:block;height:0;width:0;border:.5em solid transparent;border-bottom-color:currentColor;border-top:0}  
  4. .icon-home:after{content:'';position:absolute;top:.45em;left:.15em;display:block;height:.3em;width:.3em;border:.2em currentColor solid;border-top-width:.25em;border-bottom-width:0}  
  5. .icon-search:before,.icon-search:after{content:'';position:absolute;top:0;left:0;display:block;height:.5em}  
  6. .icon-search:before{width:.5em;border:.075em currentColor solid;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;border-radius:100%}  
  7. .icon-search:after{top:.425em;left:.6em;width:.175em;background:currentColor;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}  
  8. .icon-plus:before,.icon-plus:after{content:'';position:absolute;display:block;background:currentColor;-webkit-border-radius:.25em;-moz-border-radius:.25em;-o-border-radius:.25em;-ms-border-radius:.25em;border-radius:.25em}  
  9. .icon-plus:before{top:.4em;left:0;height:.2em;width:1em}  
  10. .icon-plus:after{top:0;left:.4em;height:1em;width:.2em}  
  11. .icon-minus:before{content:'';position:absolute;top:.4em;left:0;display:block;height:.2em;width:1em;background:currentColor;-webkit-border-radius:.25em;-moz-border-radius:.25em;-o-border-radius:.25em;-ms-border-radius:.25em;border-radius:.25em}  
  12. .icon-cancel:before,.icon-cancel:after{content:'';position:absolute;top:.4em;left:0;display:block;height:.2em;width:1em;background:currentColor;-webkit-border-radius:.25em;-moz-border-radius:.25em;-o-border-radius:.25em;-ms-border-radius:.25em;border-radius:.25em}  
  13. .icon-cancel:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}  
  14. .icon-cancel:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}  
  15. .icon-checkmark:after,.icon-checkmark:before{content:'';position:absolute;display:block;width:.15em;background:currentColor;-webkit-border-radius:.25em;-moz-border-radius:.25em;-o-border-radius:.25em;-ms-border-radius:.25em;border-radius:.25em}  
  16. .icon-checkmark:before{top:.45em;left:.2em;height:.3em;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}  
  17. .icon-checkmark:after{top:.15em;left:.5em;height:.7em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}  
  18. .icon-menu:before{content:'';position:absolute;top:.125em;left:0;display:block;height:.15em;width:1em;background:currentColor;-webkit-border-radius:.1em;-moz-border-radius:.1em;-o-border-radius:.1em;-ms-border-radius:.1em;border-radius:.1em;-webkit-box-shadow:0 .3em currentColor,0 .6em currentColor;-moz-box-shadow:0 .3em currentColor,0 .6em currentColor;-o-box-shadow:0 .3em currentColor,0 .6em currentColor;-ms-box-shadow:0 .3em currentColor,0 .6em currentColor;box-shadow:0 .3em currentColor,0 .6em currentColor}  
  19. .icon-download{width:.8em;height:.9em;margin:0 .1em;border-bottom:.1em solid currentColor}  
  20. .icon-download:before{content:'';position:absolute;bottombottom:0;left:0;display:block;height:0;width:0;border:.4em solid transparent;border-bottom-width:0;border-top-color:currentColor}  
  21. .icon-download:after{content:'';position:absolute;top:0;left:.225em;display:block;height:.5em;width:.35em;background:currentColor}  
  22. .icon-arrow-top{height:.625em;overflow:hidden}  
  23. .icon-arrow-top:before{content:'';height:.5em;width:.5em;display:block;border:.125em solid currentColor;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.175em;left:.175em}  
  24. .icon-arrow-bottombottom{height:.625em;overflow:hidden}  
  25. .icon-arrow-bottombottom:before{content:'';height:.5em;width:.5em;display:block;border:.125em solid currentColor;border-right-width:0;border-top-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;bottombottom:.175em;left:.175em}  
  26. .icon-arrow-left{width:.625em;overflow:hidden}  
  27. .icon-arrow-left:before{content:'';height:.5em;width:.5em;display:block;border:.125em solid currentColor;border-right-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.175em;left:.175em}  
  28. .icon-arrow-rightright{overflow:hidden;width:.625em}  
  29. .icon-arrow-rightright:before{content:'';height:.5em;width:.5em;display:block;border:.125em solid currentColor;border-left-width:0;border-top-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.175em;rightright:.175em}  
  30. .icon-point-top{overflow:hidden;width:.75em}  
  31. .icon-point-top:before{content:'';height:.375em;width:.375em;display:block;border:.125em solid currentColor;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.125em;left:.125em}  
  32. .icon-point-top:after{content:'';height:.875em;width:.15em;display:block;background:currentColor;position:absolute;top:.125em;left:.3em}  
  33. .icon-point-bottombottom{overflow:hidden;width:.75em}  
  34. .icon-point-bottombottom:before{content:'';height:.375em;width:.375em;display:block;border:.125em solid currentColor;border-right-width:0;border-top-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;bottombottom:.125em;left:.125em}  
  35. .icon-point-bottombottom:after{content:'';height:.875em;width:.15em;display:block;background:currentColor;position:absolute;top:0;left:.3em}  
  36. .icon-point-left{overflow:hidden;height:.75em}  
  37. .icon-point-left:before{content:'';height:.375em;width:.375em;display:block;border:.125em solid currentColor;border-right-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.125em;left:.125em}  
  38. .icon-point-left:after{content:'';height:.15em;width:.875em;display:block;background:currentColor;position:absolute;top:.3em;left:.125em}  
  39. .icon-point-rightright{overflow:hidden;height:.75em}  
  40. .icon-point-rightright:before{content:'';height:.375em;width:.375em;display:block;border:.125em solid currentColor;border-left-width:0;border-top-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:.125em;rightright:.125em}  
  41. .icon-point-rightright:after{content:'';height:.15em;width:.875em;display:block;background:currentColor;position:absolute;top:.3em;left:0}  
  42. .icon-hot::before{content:"\70ed\95e8";background:#f7df1e;font-size:0.75em;position:absolute;display:block;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}  
  43. .icon-hot{margin-left:-20px}