参考：

https://icomoon.io/ 字体图标网站
字体图标使用

实际使用

image.png

  1. @font-face {
  2.   font-family: 'icomoon';
  3.   src:  url('fonts/icomoon.eot?wz20200221');
  4.   src:  url('fonts/icomoon.eot?wz20200221#iefix') format('embedded-opentype'),
  5.     url('fonts/icomoon.ttf?wz20200221') format('truetype'),
  6.     url('fonts/icomoon.woff?wz20200221') format('woff'),
  7.     url('fonts/icomoon.svg?wz20200221#icomoon') format('svg');
  8.   font-weight: normal;
  9.   font-style: normal;
  10.   font-display: block;
  11. }
  13. [class^="icon-"], [class*=" icon-"] {
  14.   /* use !important to prevent issues with browser extensions that change fonts */
  15.   font-family: 'icomoon' !important;
  16.   speak: none;
  17.   font-style: normal;
  18.   font-weight: normal;
  19.   font-variant: normal;
  20.   text-transform: none;
  21.   line-height: 1;
  23.   /* Better Font Rendering =========== */
  24.   -webkit-font-smoothing: antialiased;
  25.   -moz-osx-font-smoothing: grayscale;
  26. }
  28. .icon-Private:before {
  29.   content: "\e990";
  30. }
  32. .icon-More:before {
  33.   content: "\e98c";
  34. }
  35. .icon-Folder:before {
  36.   content: "\e98d";
  37. }
  38. .icon-Add:before {
  39.   content: "\e98e";
  40. }
  41. .icon-remove:before {
  42.   content: "\e98f";
  43. }
  44. .icon-screen:before {
  45.   content: "\e98a";
  46. }
  47. .icon-Upload-articles:before {
  48.   content: "\e989";
  49. }
  50. .icon-Upload-Video:before {
  51.   content: "\e988";
  52. }
  53. .icon-comment:before {
  54.   content: "\e987";
  55. }
  56. .icon-link:before {
  57.   content: "\e986";
  58. }
  59. .icon-linkopen:before {
  60.   content: "\e985";
  61. }
  62. .icon-open:before {
  63.   content: "\e984";
  64. }
  65. .icon-menu:before {
  66.   content: "\e983";
  67. }
  68. .icon-tag:before {
  69.   content: "\e982";
  70. }
  71. .icon-uniE937:before {
  72.   content: "\e981";
  73. }
  74. .icon-Mute:before {
  75.   content: "\e980";
  76. }
  77. .icon-sound:before {
  78.   content: "\e97f";
  79. }
  80. .icon-choice:before {
  81.   content: "\e97e";
  82. }
  83. .icon-default:before {
  84.   content: "\e97d";
  85. }
  86. .icon-hot:before {
  87.   content: "\e97c";
  88. }
  89. .icon-play-volume:before {
  90.   content: "\e97b";
  91. }
  92. .icon-time:before {
  93.   content: "\e97a";
  94. }
  95. .icon-shopping-line:before {
  96.   content: "\e979";
  97. }
  98. .icon-shopping:before {
  99.   content: "\e978";
  100. }
  101. .icon-quit:before {
  102.   content: "\e98b";
  103. }
  104. .icon-download:before {
  105.   content: "\e977";
  106. }
  107. .icon-question:before {
  108.   content: "\e976";
  109. }
  110. .icon-delete:before {
  111.   content: "\e975";
  112. }
  113. .icon-edit:before {
  114.   content: "\e974";
  115. }
  116. .icon-qr:before {
  117.   content: "\e973";
  118. }
  119. .icon-stick:before {
  120.   content: "\e972";
  121. }
  122. .icon-arrow-left-light:before {
  123.   content: "\e971";
  124. }
  125. .icon-arrow-right-light:before {
  126.   content: "\e970";
  127. }
  128. .icon-activity:before {
  129.   content: "\e96f";
  130. }
  131. .icon-share:before {
  132.   content: "\e96e";
  133. }
  134. .icon-cup:before {
  135.   content: "\e96d";
  136. }
  137. .icon-equipment:before {
  138.   content: "\e96c";
  139. }
  140. .icon-still:before {
  141.   content: "\e96b";
  142. }
  143. .icon-arrow-down:before {
  144.   content: "\e96a";
  145. }
  146. .icon-arrow-up:before {
  147.   content: "\e969";
  148. }
  149. .icon-minus:before {
  150.   content: "\e968";
  151. }
  152. .icon-music-stop:before {
  153.   content: "\e967";
  154. }
  155. .icon-music:before {
  156.   content: "\e966";
  157. }
  158. .icon-triangle-down:before {
  159.   content: "\e965";
  160. }
  161. .icon-triangle-up:before {
  162.   content: "\e964";
  163. }
  164. .icon-video:before {
  165.   content: "\e963";
  166. }
  167. .icon-arrow-left:before {
  168.   content: "\e962";
  169. }
  170. .icon-arrow-right:before {
  171.   content: "\e961";
  172. }
  173. .icon-authorization-1:before {
  174.   content: "\e960";
  175. }
  176. .icon-authorization-2:before {
  177.   content: "\e95f";
  178. }
  179. .icon-authorization-3:before {
  180.   content: "\e95e";
  181. }
  182. .icon-authorization-4:before {
  183.   content: "\e95d";
  184. }
  185. .icon-career:before {
  186.   content: "\e95c";
  187. }
  188. .icon-close:before {
  189.   content: "\e95b";
  190. }
  191. .icon-like:before {
  192.   content: "\e95a";
  193. }
  194. .icon-location:before {
  195.   content: "\e959";
  196. }
  197. .icon-logo:before {
  198.   content: "\e958";
  199.   color: #e74b3b;
  200. }
  201. .icon-message:before {
  202.   content: "\e957";
  203. }
  204. .icon-play:before {
  205.   content: "\e956";
  206. }
  207. .icon-plus:before {
  208.   content: "\e955";
  209. }
  210. .icon-private:before {
  211.   content: "\e954";
  212. }
  213. .icon-qzone:before {
  214.   content: "\e953";
  215. }
  216. .icon-right:before {
  217.   content: "\e952";
  218. }
  219. .icon-search:before {
  220.   content: "\e951";
  221. }
  222. .icon-weibo:before {
  223.   content: "\e950";
  224. }
  225. .icon-weixin:before {
  226.   content: "\e94f";
  227. }
  228. .icon-qq:before {
  229.   content: "\e94e";
  230. }
  231. .icon-arrow-top:before {
  232.   content: "\e94d";
  233. }
  234. .icon-iphone:before {
  235.   content: "\e94c";
  236. }
  237. .icon-network:before {
  238.   content: "\e94b";
  239. }

某次想参照别的关闭按钮，只设置了content，并没有展示出来
image.png
后来才发现需要指定对应字体，也就是别的地方同时需要加上icon-close 类名的作用
image.png

  1. [class^="icon-"], [class*=" icon-"] {
  2.   /* use !important to prevent issues with browser extensions that change fonts */
  3.   font-family: 'icomoon' !important;
  4.   speak: none;
  5.   font-style: normal;
  6.   font-weight: normal;
  7.   font-variant: normal;
  8.   text-transform: none;
  9.   line-height: 1;