Iconfont輕量化導入vue項目

原文:Iconfont輕量化導入vue項目

1.進入iconfont官網,詳情

2.選中你喜歡的icon並加入購物車,然後添加進你的Iconfont文件夾下,最後下載到本地,就會有如下的一個包:

上圖中,我紅色標記的這六個文件是需要的,其他的不需要,將其複製到你vue項目的static的iconfont文件夾下面,其中在main.js全局引入下iconfont。然後我們只需要看後綴名爲css的那個文件,注意下面的class名稱就是你要使用的class名稱之一,還有一個是iconfont :

  1. @font-face {font-family: "iconfont";
  2. src: url('iconfont.eot?t=1589606592978'); /* IE9 */
  3. src: url('iconfont.eot?t=1589606592978#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4. url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABPEAAsAAAAAImAAABN2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFDgq0ZKgcATYCJAM8CyAABCAFhG0HgUwbMBtFRm4Gq+VG9n+ZoF3GzherCBm5ZJXGJafI5agru36ae8AiD39u3mFcuh+PsejPXiGTLus0J3cwZiglPE/jvj93Zh7AtFQHlACEBqYNaTdt37rNVYkfERqe3+b/uckl772kKKiojE1XCkY9AxBtEKMWUaDN1uoL9IWySsV14Nxr/cNX6Vzq37NWQQC0OTpw+sU5yysFxijU1beplnzpy8CwuI653fm57goWWDTxIFLmfbcqQU6SFmbeaxNkRZk1PzGrrNq5t7/pb6TArlP0zkdWGOZURoDO/5xpkxuQYspY7YSZlf/nl37/L/y2g1xHlOOWc0NQd26Awu1NqCIkHSXjTF3dzREJM2EmnJibMH56Wkr218JylxmIV3Wq83+dYhVVzEqPhgBOspQgTUvXEAQGxymIW6WFKYg1P4YzXbC7rZSapkzsAMOuTuBuAKfk18tfUCUEKCwa57H65jfPkviAfRNi83hlyCawpToJsNOBBkoAY7teqd4XACK/MzVOpeECkMWv/7m8P9hUQsQyPah40Ew642qvPzrZjwMmj4d3rs7NCln3P/DAiRcHBhseBI0VNy4UdiwgVkDcxoSrXi/8YPsb4YQfKkSjIWA4QGPBMKAmMGygFWB4QJvBENAvwNCgO8Gwgl7CRrjh1wqGi9CTYCjQTmyEHX6b0F4YBF9YIwucAfsDwJnBcY0SrN1IgwUHWZAQFCmsGAjm7GUCF6muARrOjq69fZyJi9Y5QSbKHhCjvo3JBi0JINRV+/Fut2UPjrUDVP2/PL0xdVNl/1NZ+TR/Lmh8niebrg0lCNnn6DOfxIAvTpCMlnaboGVkqIdy64z3h2opteOd+3hkfHbRDWfndo5OLSy98dz8B14TjbA2vNHv4NGgBQ6jhAb0BE7qUPs4OxjYqX7fygyHTjqO7V/6y1IXBw9lf49Xpi8NH34jG7Tycpm0fudDRj6S56fMD8VW2910pVfSNFTr5lLl6dXZl62EHU1d/xqm/fa1yVVHHMR6hbQ/M5aNpvOpsIu0lzgHKU9gbLt6oGQkSd7oEAehfQ/wmvpKm6yAqqlgwhQ4qJL2X+yPNbz8vlZvF9xqZ0yPWnk7bB4VWA+o4yONgROalL76mic8bsHv6VQXeF+/4ODSxLE7HO72OJPlR6hAAAesaCkohVXHbyNmcC4lVR3c1i7vC0dof6VdQpVUxhNziwHn+zOT80vS5xduwZXuRajW7DfXCjY6xRJTmODM7D59D8jAqQW03VA/Ox3MLNXBIQQaRRUFMG7cB3A3Uziu5RyzLGFwwroBugOLSz+Gm/LtjEjylVaYIu/dLQmTCmdwcAHOqZwC9BlOTnEVj1laDb6X1SvVTiMqg7Dp1MJWg0q5hydWIcLP3EaQHFwbcQ+zurZL2mwrOc7de6HlQ2own8KAUp9JDAGQIXgPBhk4xGTfBjZ+zcKufgPQQBZqEDsa1KF2hDNSJX22a6gfN2nwJ9dCbDYPsTdl3UXszb40VeIEKT5OnOnu0CZ7Ey/N3KKrRAW79aRPHIk0xo2U2Af2KXg06BvxhiNODJpAFfuCOeDlwjU8NDgHHmIyl0H/hfXqM4B+mzVzIYN+nE5daN0yOtFZkT7f3jEy2fxwJI5viQb3qXhsYrD3/EIw582y+b3O5HjuQydVvtAdLyF74vrSQ+e/2vWxJtukcg2h8W4u4bVwNujAZOUa0Vh91/LZRYny9OSZYkhvj9c0MsJpktWZMRxFZvlqt8XDER56HGQuVlQZ9Pu2pmZ8EutqNyRxdval2he5hJzU+LpYMi2pt6jqB4Hg1j6FVjJjRoiUilIVCDFPB/gRjbXOz7rFEcKr13Zn6r1C+dpxcDUvIlMPpvO2x6WEjmwjjV0rREieiB4RqrI9Bjjbdcsf72PPVPkahhhggMAtzSqA4IPkEYhgUSFYUZMbO7HlT4aIc7NhC0PkTt1iju8QhzRFmCMdaOPqH9xiYS4wuW+Rv7cjGwPPxKpaFGZohKsQgx9fGqKpmA7maLfvhGuitdX17d1ouuAhnua3x60m6/nrX9B6pYBfDVHj5+LeMcbQV8j4Fj0arMZHNgMAgf3kdECcU4NGx7S41wqo67wmrubPb5ZfFcIvPj70y1sOqp8rEEkQ4wYPzfzxLgOQzY8c9gZsOBjQ5g85E4JyC+tupaD5sRsM1sZhptVupX383JD1Fx07a4rnz5+8jXFPBMqXh7foq62Hbbk6jvd0yfcRGg/LtG79EI9VPYiPvcC6AIiAQv/61fjt9hxZM3hkCmHwes0TjdVC0WrPFoI2IqXqNamoahBZN2rdNxZ9r09dtaRpTFuYibC7asQZgHNULcpqxoU7/2FPt78qEG29LswrATRDFNWdjHPyTetXG0FUBl7T4c0RgydO56vnmg61wGuuYGIP0VmWCWB71yMg1cScMpFym6N9ioX3IbeJKcWkbxLv1OtTweaEe17448w+/agOtDf3QvuVfdDSL/Qf/G24AtlZaGccDDoYA/ErWYh2K4lrWq9T23gtj3wMA3TUx9Y2f0wsR+0JEdBAUW9g8/FSqU5EbZf8z+b/IEn4+C509G4iOFCK0rz48t+dpsFrqBRN0XqPyArhHNGQ0/rXnGgQagrzPXF19YQIV7F6u0JshCRhElL3XV0dRTPy8JwEVElZL8k2AaLcil4f886GhlE4UPdTixQOJyBpDAgaczm9ZW7kVVFVia3iYnUpJJIYfJXXzx3TGMpJ1RiKOzvXnaEmEP1c2Ddclhwa6v+iDUUfonmE7ZJSKXMCxy5FrFI9SWgEXk0SaPSP+gj9Nr8CXl7A5jHzRPkawJt9kJxMHEvuTARfQ+h/9dr4F4vBmS/x3usmA3TvlnYK0R88eZQS4yJmKnqVtWHap27GFiBhizPjxJEkuVdWaHVsNMqL0Nid4vyUxutSfY6YuorK+LGapcmKX6W6KHthZsQSiEZs8pFhX7nf0Kj8zntSzvPs6g+F24VyodPn2wc7hDuWJMOwpiPJSErAQWw2E7RkCWSyGdiRJmhtcLwxNRWzYb3NaEuOmrEnkUfLaF5oHESetJHOcXfPelqO9+OenO3wzScn/WnkWt0fyte6rdyjGNRc9ezbFU4ZIBJhfwFPOAVOJECwKGLrAilETJIq7PdsREFA0pr5lSsv6QoHsXHi0valDSb8n24ly5dDc+O5lJQKr6ZVXLyZF+eY+u+njJ/yvZ7J29LAl0RJ+PVbwGNnw8y/cd5i7LFxqfExFiXwvw+rUawBQ3mLcHypyn9+4qz9L9FfrLPsblE3q+8sS59uP7s36aHaAKbPgAwE4zUAkBkZcLURBLGdchIQ0U45CJDNI5zUdoLLwHO6gDfg0rsjfvw1PuKTfoErn+O1f+rP7B7WKbQ7cVepLeyyL5CeYvbkfThktzCfMq32pkZC2E2J3ehTATxESG0rUtZK5wOP/R+LYrh7uB3/pBFL2DCNeD49CD3soGia4eA5GDRN1PPqiehAK6+V2DGWf/SUnWF/D81TWK84Zx7WaLa3mys07Q4aT9aGziVCv2rLXay7eICBcxcrtbSR/xGE7z7fiapS0LFfQplzBWY42f/pN2olbKTPd+WKA6d3bgtNpDW67yGKej8wQf4kblZLKn9T/U88yEprwfX5j0nWP5NOdeQgKasEcfXhGgX+V6xG2dBIG2mtsnEHjeegKkHVUtpEm5XV1XyzVlQXfki0EjbqxHzdwP8BgO0MrgkwV6mQXH8TBgNdOEX5j29bp4D6XRJYFCr4/MQzPlpD4vPZzw23JFN7jqZ7nD00fc5be5W+mjJQ0riil+WqIKNCrazKUxhhje6io3awrTov+xthpfarNoWJVuq+fkqZoHG5X53fccRsfh5IU5bPjyngkJ4XFvaQCDqAph+5AQ9PHZ3qUUWwZywVTP67obHjBbd+UtVzS5kdjCJGB3PUSxCC86w1z1dE0VErnm/kf6NaN54eX/d8jSA5rE0tPTug/W80LcWPpZCxTy+UERpdmPUjOUvcFvonIo+RBycmgr6bYMhd4npP3fQbxt/VPRR5sxHVLWy/4/Wyoe1+eHrRs7iac38cJ1JyInLDc/Q3tM2yyJj6aFf9GvFtZrPu1cqUz2SXIutqz+9a+ysIpx+ljbhqm7Ted6hvyD2iQWmXdFC0WsOqTmPFVXx10affNhtr5Zh9r/sXxs+VzWE4KeNI10giuR3z3/uQ+rf2M6UojTKR68bwcnj7DnhtJmLZ6VgH4evgXTvgNXrYumtPAdlhBOhjFBjbtUqDYspdbbuDDRC+4qO2Pk2FMbilmFHIXYsVMQrwoAWbi/607dx1WIyhQkxpiUQVigABzufruAYBxheEKpA9JXx3bdMar9HAV7w9GEs8IB0ULxfwZP/ccR3g7sPWrhySP2qpiOsrkB/kIN8R81wF+DGXXE+bRbpDtSOSUXkotpe7kb5DrSdDiLXcAiyEWuDditD+AQjG56vZeqSudgTM2OpN8kgFR0FC8j6aR8K+CiqY85WQI4vKuGWQRHDiGObGQh5zOZOsTl8uWL7MP/ggE+wrt8RrIZ8Mjm8IN8Q/vf+SIGC2r1ErS6EOUtnS8Dn0fFKnVR7vkWcu4FHhVJ/MHQHN3i+YILAH+siBtr8hKiMOJ9ULcTjx3NRcWRHjyLuIGaVtqjWzNFCKpNACsqDZmzbNgU4yDx7QxWyL0fx17PRoKlmVPAlZ0OHBcha6Scq1uINQwy1kAUhcmDbgtvhKP0N9vpugr+EWwxaLYjqKxlsMc57VAhUBvHerCrW7DnarnKq/WlqSkpvnveb9fK/zt84jBw6HQ27EMXUf+ARg655R3hjseV1DF3MkpfKp7UKv0fPMqQ6YPQjgrLSEpK+nVAIAIU7hl9nZFxZGR+anZoEwg18MPn1DzUzI53OsCm7nnPg8NXiFIj4vHKCtAfpyJsNBtl7f0RK9mRSmz4EWLYRyAAYGp2SDyvRQWSkEhz4g7Mbgqc0bvKZMkchiDO+SrVUFX/k7vCgviCliQkJBoDA23wvsKr55NgMXnm7eAgLM5eT9vQc6X0hgxa1wycPeA3t/IstztS3rO0V45oEfghQEd5rLdbGs31xYx4xnzv36gpV188Kke7VKD+bRq6n51JV44vP5nFpO2McxRNKiyCZvIjtz/foyQrD3qo/uiQr5fWYPRv76kazmV1L8t6hoROunc/VqpT1s1ib1e03USTapvsfdAi1iE84aAlWjQejatb0JoqOUqMGAGo39CNXBBmzNGsyA6O6nMMiZKTNJtTt4qg5RY2vmyGvVFapnkgw1QVasRDVILs7DcxGdwbStw8QgQWRiyRlLputGi6vVFZtZldlaNXZ61LKmVYz9Z8022G05hgXd8OiZMfjpJfhFL2LJ0q9cma2fj9w+M3r88S2rkQ0q5dav8ipGk8pHw8eSKqUq9tlX+FfXYawVu9GCt+J+xX4lSf3P/mdBkn9h0j/Tb2A30I6Zi1zYsxT0A1OyF9j+IpqpBa9nqevdhj405pd5alwIUTeeqPPG772XEmBf+gPqPWs22Cr8Jk+w4c2P/157IJx3D7WFJIPbJWbdAFBAivOnG6EQtaYiuxeqtg6iSQYIAh9a3zBRlppmBc1GNZNVyoGn4jKlDx9N7u+y4MigfskCjxBG/lpUAeRMJEosJbJwwOUEiUXBsnkohP63EEpBQtFxQkRWYU/nMpaFJRlCv4hmTcnLo3btHI/js+d+XFExgVNfXjsXn8mAwH24BNG2AAiHzFEtKaFzVIcpRvHsUlfgq4pZEVA2pw0ohcATO6llVuWkIysLg9uA1eoJZdlsrHyiAc9nMV8xVU7b+rZ3QHhADTkhTZi7HxoJ3fY4w9RUX69Z7QIaSh0wEugMHFEBMKKc8EhAbgPDwTAT28hWQulYb7sAprStWjzpyMzWqveVW4ZCD5vRY4DJFl4Abxun/OcR24/DFRyLXv/XpuKerOx6TvkbqTUodUMilbQ+NWiBR17t4zl9K22SnBDuFTddVeK9whMS5nfS026v3lPSU71ebvbtZ1qvBMxeMG0IOCGeDShAbMZyG3oD2dQzqE8gYtq4PdlGkBx4xPPeU4n+yuu5griQNFmyAXIj0oXUYfktvRCJ69uGjCGVb8VzgVma4s9mkHHPArykl+eHPu87Rk6pbj92FGuHwBtvhvZ+c6/tfzYn4DM/Ft91Qy4934aFEDbfsRqooqBP1t5VEprDTncYvN3eHeS77opIW97ruyKZoLCRETR2cngzoUSw4KJGsGKnVnBSTGt9FyG2AYIYB1DEgSYIfi4FhZdrQePnkTcTvgkWovwXrPgFEZyMQAKVLvJkTXrTFgTBVZ1uijQno63yFsd/oW0ByqqNLPvDUumQmvpxs/+ICUsVZerZziJGmcJRLdrjYQiscmGHWvpNJB+GwdDK9prj7g1oC4KE667qdOtMmpO5vrxt/fwvtC1A4Zzxt/MflkoPrqZ+lOCPJEmdsSvKeraz6JJRvlw4Jq7FkDC4PawyPZtDLf1WQM6HQb+SkSV9866o7gTlO6tT3QeV1NJIK50spJfhFYb4SrACSpL8/BLBBtwRnKyc75WQLq1ulCl97bkScNloK5tr82tPFyA92XRiSNJycQsmrzDukXzI3/+C5DnZClqYnr5YQPB5QeNw/qfdDgA=') format('woff2'),
  5. url('iconfont.woff?t=1589606592978') format('woff'),
  6. url('iconfont.ttf?t=1589606592978') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  7. url('iconfont.svg?t=1589606592978#iconfont') format('svg'); /* iOS 4.1- */
  8. }
  9. .iconfont {
  10. font-family: "iconfont" !important;
  11. font-size: 16px;
  12. font-style: normal;
  13. -webkit-font-smoothing: antialiased;
  14. -moz-osx-font-smoothing: grayscale;
  15. }
  16. .icon-jiahao-:before {
  17. content: "\e692";
  18. }
  19. .icon-jianhao:before {
  20. content: "\e8b0";
  21. }
  22. .icon-zanwushipin:before {
  23. content: "\e696";
  24. }
  25. .icon-zanwuxiaoxi:before {
  26. content: "\e63b";
  27. }
  28. .icon-zanwushuju2:before {
  29. content: "\e951";
  30. }
  31. .icon-zanwu-lan:before {
  32. content: "\e69c";
  33. }
  34. .icon-zanwu1:before {
  35. content: "\e651";
  36. }
  37. .icon-zanwutupian:before {
  38. content: "\e8c1";
  39. }
  40. .icon-zanwudaan:before {
  41. content: "\e62b";
  42. }
  43. .icon-zanwu:before {
  44. content: "\e60b";
  45. }
  46. .icon-shujuweikong:before {
  47. content: "\e86f";
  48. }
  49. .icon-zanwushuju1:before {
  50. content: "\e6b9";
  51. }
  52. .icon-Rotate:before {
  53. content: "\e679";
  54. }
  55. .icon-guolvqi:before {
  56. content: "\e627";
  57. }

3.如何使用你下載好的icon呢(如果我需要在組件中使用)?

組件novideo:

  1. <template>
  2. <div class="contentMainNovideo">
  3. <** iconfont icon-zanwushipin是必須加的class名,其中iconfont是**>
  4. <i class="iconfont icon-zanwushipin"></i>
  5. <p>{{i18n.noVideo}}</p>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. computed:{
  11. i18n(){
  12. return this.$t("common");
  13. }
  14. }
  15. };
  16. </script>
  17. <style scoped>
  18. .contentMainNovideo {
  19. height: 100%;
  20. text-align: center;
  21. background: #fff;
  22. margin: auto;
  23. }
  24. //icon-zanwushipin就是 .css文件下的圖標對應的class名稱
  25. .icon-zanwushipin{
  26. margin-top: 400rpx;
  27. font-size: 100rpx;
  28. color: #4675f9;
  29. }
  30. .contentMainNovideo p {
  31. font-size: 28rpx;
  32. color: #999;
  33. }
  34. </style>

先引入:

  1. import novideo from "../../../components/owner/novideo.vue";
  2. export default {
  3. components: {
  4. novideo
  5. }
  6. }

使用組件:

<novideo v-if="!src"></novideo>

注意:

1.通過icon  你是下載不下來顏色的,   除非你下載成png格式或者使用另一種引用和下載方式

2.引入的icon和你下載時候選擇的尺寸大小有關係關係,可以通過樣式color去控制顏色和 font-size  控制器大小

3.不直接使用png,或者jpg等引入的方式,是爲了減少體積大小,優化性能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章