devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

如何在前端项目中单独引入 ElementUI 图标以及使用_element-icons.woff

作者：IT小白 | 2024-02-20 22:43:37

赞

踩

element-icons.woff

前言

首先 element-ui 图标是基于字体文件的的形式实现的，如woff和ttf等。有时候一些需求用CSS的before和after为元素实现，自然用到 content 属性，而这个content不仅仅可以承载空格，还可以承载字符编码的。

一、准备好 ElementUI 的图标文件

（1）在项目中使用 npm i element-ui --force 导入依赖，然后找到字体图标文件(element-icons.woff 和 element-icons.ttf)，如下图所示。

 （2）还要找到icon.css文件

二、在项目的全局样式文件中引入字体图标和图标样式

（1）字体存放在项目的 /public/element-ui/fonts 目录中，然后在 global.less 或 global.scss 等全局样式文件中引入该字体，随便起一个名称，如：element-ui-icons

（2）复制 icon.css 的样式代码到全局样式文件中

  1. *, *::before, *::after {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: inherit;
  5. }
  6.  
  7. html, body {
  8.   width: 100%;
  9.   height: 100%;
  10. }
  11.  
  12. #app {
  13.   width: 100%;
  14.   height: 100%;
  15. }
  16.  
  17. /* ---- ---- ---- ---- ^ ElementUI ICON ---- ---- ---- ---- */
  18. @font-face {
  19.   font-family: 'element-ui-icons';
  20.   src: url('/element-ui/fonts/element-icons.woff') format('woff'),
  21.        url('/element-ui/fonts/element-icons.ttf') format('truetype');
  22.   font-weight: normal;
  23.   font-display: "auto";
  24.   font-style: normal;
  25. }
  26.  
  27. [class*=" el-icon-"],[class^=el-icon-] {
  28.   font-family: element-ui-icons;
  29.   font-style: normal;
  30.   font-weight: 400;
  31.   font-variant: normal;
  32.   text-transform: none;
  33.   line-height: 1;
  34.   vertical-align: baseline;
  35.   display: inline-block;
  36.   -webkit-font-smoothing: antialiased;
  37.   -moz-osx-font-smoothing: grayscale;
  38. }
  39.  
  40. .el-icon-ice-cream-round:before{content:"\e6a0"}
  41. .el-icon-ice-cream-square:before{content:"\e6a3"}
  42. .el-icon-lollipop:before{content:"\e6a4"}
  43. .el-icon-potato-strips:before{content:"\e6a5"}
  44. .el-icon-milk-tea:before{content:"\e6a6"}
  45. .el-icon-ice-drink:before{content:"\e6a7"}
  46. .el-icon-ice-tea:before{content:"\e6a9"}
  47. .el-icon-coffee:before{content:"\e6aa"}
  48. .el-icon-orange:before{content:"\e6ab"}
  49. .el-icon-pear:before{content:"\e6ac"}
  50. .el-icon-apple:before{content:"\e6ad"}
  51. .el-icon-cherry:before{content:"\e6ae"}
  52. .el-icon-watermelon:before{content:"\e6af"}
  53. .el-icon-grape:before{content:"\e6b0"}
  54. .el-icon-refrigerator:before{content:"\e6b1"}
  55. .el-icon-goblet-square-full:before{content:"\e6b2"}
  56. .el-icon-goblet-square:before{content:"\e6b3"}
  57. .el-icon-goblet-full:before{content:"\e6b4"}
  58. .el-icon-goblet:before{content:"\e6b5"}
  59. .el-icon-cold-drink:before{content:"\e6b6"}
  60. .el-icon-coffee-cup:before{content:"\e6b8"}
  61. .el-icon-water-cup:before{content:"\e6b9"}
  62. .el-icon-hot-water:before{content:"\e6ba"}
  63. .el-icon-ice-cream:before{content:"\e6bb"}
  64. .el-icon-dessert:before{content:"\e6bc"}
  65. .el-icon-sugar:before{content:"\e6bd"}
  66. .el-icon-tableware:before{content:"\e6be"}
  67. .el-icon-burger:before{content:"\e6bf"}
  68. .el-icon-knife-fork:before{content:"\e6c1"}
  69. .el-icon-fork-spoon:before{content:"\e6c2"}
  70. .el-icon-chicken:before{content:"\e6c3"}
  71. .el-icon-food:before{content:"\e6c4"}
  72. .el-icon-dish-1:before{content:"\e6c5"}
  73. .el-icon-dish:before{content:"\e6c6"}
  74. .el-icon-moon-night:before{content:"\e6ee"}
  75. .el-icon-moon:before{content:"\e6f0"}
  76. .el-icon-cloudy-and-sunny:before{content:"\e6f1"}
  77. .el-icon-partly-cloudy:before{content:"\e6f2"}
  78. .el-icon-cloudy:before{content:"\e6f3"}
  79. .el-icon-sunny:before{content:"\e6f6"}
  80. .el-icon-sunset:before{content:"\e6f7"}
  81. .el-icon-sunrise-1:before{content:"\e6f8"}
  82. .el-icon-sunrise:before{content:"\e6f9"}
  83. .el-icon-heavy-rain:before{content:"\e6fa"}
  84. .el-icon-lightning:before{content:"\e6fb"}
  85. .el-icon-light-rain:before{content:"\e6fc"}
  86. .el-icon-wind-power:before{content:"\e6fd"}
  87. .el-icon-baseball:before{content:"\e712"}
  88. .el-icon-soccer:before{content:"\e713"}
  89. .el-icon-football:before{content:"\e715"}
  90. .el-icon-basketball:before{content:"\e716"}
  91. .el-icon-ship:before{content:"\e73f"}
  92. .el-icon-truck:before{content:"\e740"}
  93. .el-icon-bicycle:before{content:"\e741"}
  94. .el-icon-mobile-phone:before{content:"\e6d3"}
  95. .el-icon-service:before{content:"\e6d4"}
  96. .el-icon-key:before{content:"\e6e2"}
  97. .el-icon-unlock:before{content:"\e6e4"}
  98. .el-icon-lock:before{content:"\e6e5"}
  99. .el-icon-watch:before{content:"\e6fe"}
  100. .el-icon-watch-1:before{content:"\e6ff"}
  101. .el-icon-timer:before{content:"\e702"}
  102. .el-icon-alarm-clock:before{content:"\e703"}
  103. .el-icon-map-location:before{content:"\e704"}
  104. .el-icon-delete-location:before{content:"\e705"}
  105. .el-icon-add-location:before{content:"\e706"}
  106. .el-icon-location-information:before{content:"\e707"}
  107. .el-icon-location-outline:before{content:"\e708"}
  108. .el-icon-location:before{content:"\e79e"}
  109. .el-icon-place:before{content:"\e709"}
  110. .el-icon-discover:before{content:"\e70a"}
  111. .el-icon-first-aid-kit:before{content:"\e70b"}
  112. .el-icon-trophy-1:before{content:"\e70c"}
  113. .el-icon-trophy:before{content:"\e70d"}
  114. .el-icon-medal:before{content:"\e70e"}
  115. .el-icon-medal-1:before{content:"\e70f"}
  116. .el-icon-stopwatch:before{content:"\e710"}
  117. .el-icon-mic:before{content:"\e711"}
  118. .el-icon-copy-document:before{content:"\e718"}
  119. .el-icon-full-screen:before{content:"\e719"}
  120. .el-icon-switch-button:before{content:"\e71b"}
  121. .el-icon-aim:before{content:"\e71c"}
  122. .el-icon-crop:before{content:"\e71d"}
  123. .el-icon-odometer:before{content:"\e71e"}
  124. .el-icon-time:before{content:"\e71f"}
  125. .el-icon-bangzhu:before{content:"\e724"}
  126. .el-icon-close-notification:before{content:"\e726"}
  127. .el-icon-microphone:before{content:"\e727"}
  128. .el-icon-turn-off-microphone:before{content:"\e728"}
  129. .el-icon-position:before{content:"\e729"}
  130. .el-icon-postcard:before{content:"\e72a"}
  131. .el-icon-message:before{content:"\e72b"}
  132. .el-icon-chat-line-square:before{content:"\e72d"}
  133. .el-icon-chat-dot-square:before{content:"\e72e"}
  134. .el-icon-chat-dot-round:before{content:"\e72f"}
  135. .el-icon-chat-square:before{content:"\e730"}
  136. .el-icon-chat-line-round:before{content:"\e731"}
  137. .el-icon-chat-round:before{content:"\e732"}
  138. .el-icon-set-up:before{content:"\e733"}
  139. .el-icon-turn-off:before{content:"\e734"}
  140. .el-icon-open:before{content:"\e735"}
  141. .el-icon-connection:before{content:"\e736"}
  142. .el-icon-link:before{content:"\e737"}
  143. .el-icon-cpu:before{content:"\e738"}
  144. .el-icon-thumb:before{content:"\e739"}
  145. .el-icon-female:before{content:"\e73a"}
  146. .el-icon-male:before{content:"\e73b"}
  147. .el-icon-guide:before{content:"\e73c"}
  148. .el-icon-news:before{content:"\e73e"}
  149. .el-icon-price-tag:before{content:"\e744"}
  150. .el-icon-discount:before{content:"\e745"}
  151. .el-icon-wallet:before{content:"\e747"}
  152. .el-icon-coin:before{content:"\e748"}
  153. .el-icon-money:before{content:"\e749"}
  154. .el-icon-bank-card:before{content:"\e74a"}
  155. .el-icon-box:before{content:"\e74b"}
  156. .el-icon-present:before{content:"\e74c"}
  157. .el-icon-sell:before{content:"\e6d5"}
  158. .el-icon-sold-out:before{content:"\e6d6"}
  159. .el-icon-shopping-bag-2:before{content:"\e74d"}
  160. .el-icon-shopping-bag-1:before{content:"\e74e"}
  161. .el-icon-shopping-cart-2:before{content:"\e74f"}
  162. .el-icon-shopping-cart-1:before{content:"\e750"}
  163. .el-icon-shopping-cart-full:before{content:"\e751"}
  164. .el-icon-smoking:before{content:"\e752"}
  165. .el-icon-no-smoking:before{content:"\e753"}
  166. .el-icon-house:before{content:"\e754"}
  167. .el-icon-table-lamp:before{content:"\e755"}
  168. .el-icon-school:before{content:"\e756"}
  169. .el-icon-office-building:before{content:"\e757"}
  170. .el-icon-toilet-paper:before{content:"\e758"}
  171. .el-icon-notebook-2:before{content:"\e759"}
  172. .el-icon-notebook-1:before{content:"\e75a"}
  173. .el-icon-files:before{content:"\e75b"}
  174. .el-icon-collection:before{content:"\e75c"}
  175. .el-icon-receiving:before{content:"\e75d"}
  176. .el-icon-suitcase-1:before{content:"\e760"}
  177. .el-icon-suitcase:before{content:"\e761"}
  178. .el-icon-film:before{content:"\e763"}
  179. .el-icon-collection-tag:before{content:"\e765"}
  180. .el-icon-data-analysis:before{content:"\e766"}
  181. .el-icon-pie-chart:before{content:"\e767"}
  182. .el-icon-data-board:before{content:"\e768"}
  183. .el-icon-data-line:before{content:"\e76d"}
  184. .el-icon-reading:before{content:"\e769"}
  185. .el-icon-magic-stick:before{content:"\e76a"}
  186. .el-icon-coordinate:before{content:"\e76b"}
  187. .el-icon-mouse:before{content:"\e76c"}
  188. .el-icon-brush:before{content:"\e76e"}
  189. .el-icon-headset:before{content:"\e76f"}
  190. .el-icon-umbrella:before{content:"\e770"}
  191. .el-icon-scissors:before{content:"\e771"}
  192. .el-icon-mobile:before{content:"\e773"}
  193. .el-icon-attract:before{content:"\e774"}
  194. .el-icon-monitor:before{content:"\e775"}
  195. .el-icon-search:before{content:"\e778"}
  196. .el-icon-takeaway-box:before{content:"\e77a"}
  197. .el-icon-paperclip:before{content:"\e77d"}
  198. .el-icon-printer:before{content:"\e77e"}
  199. .el-icon-document-add:before{content:"\e782"}
  200. .el-icon-document:before{content:"\e785"}
  201. .el-icon-document-checked:before{content:"\e786"}
  202. .el-icon-document-copy:before{content:"\e787"}
  203. .el-icon-document-delete:before{content:"\e788"}
  204. .el-icon-document-remove:before{content:"\e789"}
  205. .el-icon-tickets:before{content:"\e78b"}
  206. .el-icon-folder-checked:before{content:"\e77f"}
  207. .el-icon-folder-delete:before{content:"\e780"}
  208. .el-icon-folder-remove:before{content:"\e781"}
  209. .el-icon-folder-add:before{content:"\e783"}
  210. .el-icon-folder-opened:before{content:"\e784"}
  211. .el-icon-folder:before{content:"\e78a"}
  212. .el-icon-edit-outline:before{content:"\e764"}
  213. .el-icon-edit:before{content:"\e78c"}
  214. .el-icon-date:before{content:"\e78e"}
  215. .el-icon-c-scale-to-original:before{content:"\e7c6"}
  216. .el-icon-view:before{content:"\e6ce"}
  217. .el-icon-loading:before{content:"\e6cf"}
  218. .el-icon-rank:before{content:"\e6d1"}
  219. .el-icon-sort-down:before{content:"\e7c4"}
  220. .el-icon-sort-up:before{content:"\e7c5"}
  221. .el-icon-sort:before{content:"\e6d2"}
  222. .el-icon-finished:before{content:"\e6cd"}
  223. .el-icon-refresh-left:before{content:"\e6c7"}
  224. .el-icon-refresh-right:before{content:"\e6c8"}
  225. .el-icon-refresh:before{content:"\e6d0"}
  226. .el-icon-video-play:before{content:"\e7c0"}
  227. .el-icon-video-pause:before{content:"\e7c1"}
  228. .el-icon-d-arrow-right:before{content:"\e6dc"}
  229. .el-icon-d-arrow-left:before{content:"\e6dd"}
  230. .el-icon-arrow-up:before{content:"\e6e1"}
  231. .el-icon-arrow-down:before{content:"\e6df"}
  232. .el-icon-arrow-right:before{content:"\e6e0"}
  233. .el-icon-arrow-left:before{content:"\e6de"}
  234. .el-icon-top-right:before{content:"\e6e7"}
  235. .el-icon-top-left:before{content:"\e6e8"}
  236. .el-icon-top:before{content:"\e6e6"}
  237. .el-icon-bottom:before{content:"\e6eb"}
  238. .el-icon-right:before{content:"\e6e9"}
  239. .el-icon-back:before{content:"\e6ea"}
  240. .el-icon-bottom-right:before{content:"\e6ec"}
  241. .el-icon-bottom-left:before{content:"\e6ed"}
  242. .el-icon-caret-top:before{content:"\e78f"}
  243. .el-icon-caret-bottom:before{content:"\e790"}
  244. .el-icon-caret-right:before{content:"\e791"}
  245. .el-icon-caret-left:before{content:"\e792"}
  246. .el-icon-d-caret:before{content:"\e79a"}
  247. .el-icon-share:before{content:"\e793"}
  248. .el-icon-menu:before{content:"\e798"}
  249. .el-icon-s-grid:before{content:"\e7a6"}
  250. .el-icon-s-check:before{content:"\e7a7"}
  251. .el-icon-s-data:before{content:"\e7a8"}
  252. .el-icon-s-opportunity:before{content:"\e7aa"}
  253. .el-icon-s-custom:before{content:"\e7ab"}
  254. .el-icon-s-claim:before{content:"\e7ad"}
  255. .el-icon-s-finance:before{content:"\e7ae"}
  256. .el-icon-s-comment:before{content:"\e7af"}
  257. .el-icon-s-flag:before{content:"\e7b0"}
  258. .el-icon-s-marketing:before{content:"\e7b1"}
  259. .el-icon-s-shop:before{content:"\e7b4"}
  260. .el-icon-s-open:before{content:"\e7b5"}
  261. .el-icon-s-management:before{content:"\e7b6"}
  262. .el-icon-s-ticket:before{content:"\e7b7"}
  263. .el-icon-s-release:before{content:"\e7b8"}
  264. .el-icon-s-home:before{content:"\e7b9"}
  265. .el-icon-s-promotion:before{content:"\e7ba"}
  266. .el-icon-s-operation:before{content:"\e7bb"}
  267. .el-icon-s-unfold:before{content:"\e7bc"}
  268. .el-icon-s-fold:before{content:"\e7a9"}
  269. .el-icon-s-platform:before{content:"\e7bd"}
  270. .el-icon-s-order:before{content:"\e7be"}
  271. .el-icon-s-cooperation:before{content:"\e7bf"}
  272. .el-icon-bell:before{content:"\e725"}
  273. .el-icon-message-solid:before{content:"\e799"}
  274. .el-icon-video-camera:before{content:"\e772"}
  275. .el-icon-video-camera-solid:before{content:"\e796"}
  276. .el-icon-camera:before{content:"\e779"}
  277. .el-icon-camera-solid:before{content:"\e79b"}
  278. .el-icon-download:before{content:"\e77c"}
  279. .el-icon-upload2:before{content:"\e77b"}
  280. .el-icon-upload:before{content:"\e7c3"}
  281. .el-icon-picture-outline-round:before{content:"\e75f"}
  282. .el-icon-picture-outline:before{content:"\e75e"}
  283. .el-icon-picture:before{content:"\e79f"}
  284. .el-icon-close:before{content:"\e6db"}
  285. .el-icon-check:before{content:"\e6da"}
  286. .el-icon-plus:before{content:"\e6d9"}
  287. .el-icon-minus:before{content:"\e6d8"}
  288. .el-icon-help:before{content:"\e73d"}
  289. .el-icon-s-help:before{content:"\e7b3"}
  290. .el-icon-circle-close:before{content:"\e78d"}
  291. .el-icon-circle-check:before{content:"\e720"}
  292. .el-icon-circle-plus-outline:before{content:"\e723"}
  293. .el-icon-remove-outline:before{content:"\e722"}
  294. .el-icon-zoom-out:before{content:"\e776"}
  295. .el-icon-zoom-in:before{content:"\e777"}
  296. .el-icon-error:before{content:"\e79d"}
  297. .el-icon-success:before{content:"\e79c"}
  298. .el-icon-circle-plus:before{content:"\e7a0"}
  299. .el-icon-remove:before{content:"\e7a2"}
  300. .el-icon-info:before{content:"\e7a1"}
  301. .el-icon-question:before{content:"\e7a4"}
  302. .el-icon-warning-outline:before{content:"\e6c9"}
  303. .el-icon-warning:before{content:"\e7a3"}
  304. .el-icon-goods:before{content:"\e7c2"}
  305. .el-icon-s-goods:before{content:"\e7b2"}
  306. .el-icon-star-off:before{content:"\e717"}
  307. .el-icon-star-on:before{content:"\e797"}
  308. .el-icon-more-outline:before{content:"\e6cc"}
  309. .el-icon-more:before{content:"\e794"}
  310. .el-icon-phone-outline:before{content:"\e6cb"}
  311. .el-icon-phone:before{content:"\e795"}
  312. .el-icon-user:before{content:"\e6e3"}
  313. .el-icon-user-solid:before{content:"\e7a5"}
  314. .el-icon-setting:before{content:"\e6ca"}
  315. .el-icon-s-tools:before{content:"\e7ac"}
  316. .el-icon-delete:before{content:"\e6d7"}
  317. .el-icon-delete-solid:before{content:"\e7c9"}
  318. .el-icon-eleme:before{content:"\e7c7"}
  319. .el-icon-platform-eleme:before{content:"\e7ca"}
  320.  
  321. .el-icon-loading{
  322.   -webkit-animation: rotating 2s linear infinite;
  323.   animation: rotating 2s linear infinite
  324. }
  325.  
  326. @-webkit-keyframes rotating {
  327.   0% {
  328.     -webkit-transform: rotateZ(0);
  329.     transform: rotateZ(0)
  330.   }
  331.   100% {
  332.     -webkit-transform: rotateZ(360deg);
  333.     transform: rotateZ(360deg)
  334.   }
  335. }
  336.  
  337. @keyframes rotating{
  338.   0% {
  339.     -webkit-transform: rotateZ(0);
  340.     transform: rotateZ(0)
  341.   }
  342.   100% {
  343.     -webkit-transform: rotateZ(360deg);
  344.     transform: rotateZ(360deg)
  345.   }
  346. }
  347. /* ---- ---- ---- ---- / ElementUI ICON ---- ---- ---- ---- */

三、使用方式

（1）Html代码

  1. <template>
  2.   <div style="padding: 50px;">
  3.     <i class="el-icon el-icon-star-on"></i>
  4.     <span>HelloWorld ~</span>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   data: () => ({
  11.     // ...
  12.   }),
  13.   methods: {
  14.     // ...
  15.   }
  16. }
  17. </script>
  18.  
  19. <style>
  20.   i {
  21.     display: block !important;
  22.     width: 100px !important;
  23.     height: auto;
  24.     font-size: 25px !important;
  25.     color: #5e7ce0 !important;
  26.     box-shadow: 0 0 5px #5e7ce0;
  27.   }
  28.  
  29.   span {
  30.     display: block;
  31.     width: 100px;
  32.     height: 30px;
  33.     background-color: #5e7ce0;
  34.     text-align: center;
  35.     line-height: 30px;
  36.     color: #fff;
  37.   }
  38.  
  39.   span::before {
  40.     font-family: element-ui-icons;
  41.     content: '\e7b9';
  42.     font-size: 16px;
  43.   }
  44. </style>

四、运行效果

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号