iconfont網(wǎng)站

1.先把圖標添加到項目(新建項目)

2.在page文件下 新建iconfont目錄和子文件iconfont.wxss

iconfont.wxss

代碼復(fù)制到瀏覽器,打開css文件

全部復(fù)制,放到新建的iconfont.wxss文件里

初步 iconfont.wxss

@font-face {font-family: "iconfont";src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?t=1619416948083'); /* IE9 */src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?t=1619416948083#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAjoAAsAAAAAD8QAAAiaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEEAqQUI09ATYCJAMoCxYABCAFhG0HgV8bUg1RlE9Smeyr443RAxJ02LKMxFSKz4yLUTcq6VAx6Gv0eU/B8zXW3t/dM5HEkEyiJhKJKpYJGS/Numkj49kzkbn/W2sfl2iD2Vq8hFnSemt/ZG32jZwltGVSIkQIjSnatN27i91BFLiYIIkTUYeQiiqVo2K0joTE5xNvPSotNUMq7o8yuB1MEsgpo3rAHO9/AwgM/Lva71e/YJ6Iukj+oVHTE7FDVJNaJr2QCUnE2yfkP4QCkUQjtAghZCzMK9OeEJTayq/DwxDASdahvrHL+ycYxcAFwYgFwSIYDZmYnGzBrlhTLjRAtrBgV9t9ALBpf778gq5GAQqLBvzE6blI4fh7aed1CsyaAajmEHDaDTTQBpiTvJdauYF2+bYtOtP6G+YAfnGfAfiAzwyf+RX01fN36sfKwaZClErqIv7NAxxoDBYEhR0rNhAr4KJbi1/vcsAHVKQvYdDRkAwgEJcMIQDJDwJVpADoKEiboWOHdAM8sL7tMAkbAE7zgjAgDdQ+6DXg8rgtyoadZMegEDS6xz3pIjs4oYW+MfECGs3D7Izl07SE5bcnrMXK0vpahkYj0OmKFO4pJcwKbbhAppI3kCKt8BCs69NGSEOFcrSXsYr0IgSVJ/boxXSpUqJg0WQySj4ORe4OGUCQVDkDCCtpTGxohgaK064Y5SFvIujSFrLFKWaIzIsbhEXZxTNL8eL2++3QRPXr8L68MwoAyoepfciRS8kGvUhJkmVkFYQSsWlrrz1S0RdMCEVEx4ATWtk/qqSRjQuK8PpmiEpaeGZ1TWAirmqStkiadzQKcaqrB7p0vEms1Qoni/T6RSbu4zEM0ZmMS2CZXRmvxUtJVnk2q9mN1jJGClnldSS0I7iuz+ZYlIzhjnElQAAJIFbMFBrSCkpmaZ6JMFmvzZYT82LqdPHw01N0E2UlTWRDj12LznNYV/VVB4Gw3L1R51sqsWvhKcuaGbWd1o1ajyFtLCRHyMi9oRIWVXm1aH1UlHXjrNAN3kcjrNEmE3KCkLZAqCRz5UTDeG4HgEAGAC5j4QoF65wusEofSijrQHq9cFz1gCln0nF3XLUmjc3GoaRSGilNFsh0SlVfA0+vn9fOEbdF+odC7Q2BZvWi8KK2dzyldaGsDwbJdigkSrYb2WCnhKX93B3s2tMrS46yG3G1zlVidyRUKZVTMnwHo9ZaBlR9nAZeQz93l5zgtYhxWHktpPWCfYMIb72ygbtfDTbr0DuNKas83D0X2bosW7RsJ2JecUkvm4ae14tCL5R2AaBq4hDSOmZT5GRvj70cE3fb0RpKiSgQLeXGortJMOVxLixrfdp4kesfV1HGxEQPoRV7usdCrlE4d169t7+eOz/MKHiRO3uGkJngmTVthstv1+KsKeMD0wHLzTwKv8O8szdq7wXmhew9Zfhdxl3cPH3bBeIiTjdkTfyVxyXpJheZ2m4cj51HLX5ZHt1pg8Uq5m/Lq4DwPFzfzM2odhIIj7+AzNi0fQr0L+IiiPL8p8BQdOEMIwOUbYMkbiWerm2wa/R8dyZ/bSo3eOE4rTOGAf/j70P475G96Dt+z4RacVIP/x26F3mPP0JV/Kvp69n4q/wmxl5GEz/EHvSymweELph0yozLEk5jmXs2zyJlR+CMGtSit2+jtVityf93bL91C6tF/WswCpWdUstRGao+hcrZn6VOZgWYmdnfOGGamHB+QlvlzPa51bujYkLsC8Yeqz/b17lEyvI5dKeku+yRdciGiMgIEDp5xcyFtbPTXLcZZVjuOTWyx1xNQyDtlNmuAfUuRqGJwuNiotGHHd3x/Bqf0caVVjduWVbSb9k73abXWN69b15jmMfd61AzIgQ1mytvmCFJPklLTM6uKJ7Egxqw6nW20cZWv9bo7yfycpZVvviWgIU0NQicLrJMCYWhJCRJzNiY9uuC6HwunLBi03gTn0VXxi/hZTlMEON5IuaYvRbFtwsF/cgk/AQd0NWYm1ZiTN33/ef3jkSz+GfMB1fsnWwUVxPXGjKLdj4ppNWw+r0tgk3YsHoCSEcWipgpSKily3Qcy0KmTgdZtgmjFwe7bUsxDDimGLa57/u/80/m+U5ea0jRP5jWsjYXMqZtBNCrHD7pdVHaqbYb7I5tjIuk0msTGtdH1mbmOhtM4VShGg1qcFVHDHyln41VYW8fVhWXEgecfm65d9zyLuMOjpq/eL7bkmj/wIowcbA4TX88cMWNnxIHHX+ueHvc8gLjYm7eT91uC1rZiR4mPpZqx9gDQfDzyTP4tuq82VMYc+YpM9E5fIjNRgE//2hiQPfEscV7XrQuHdM7x3wFnI2sMp+jYk8cJx6+0nP6g9pjuyHoBd/MRg1V5sOmLeUkWK/k4WP1sRMAnUGCj7M7n5N5nZa90v8+/7evLIWt6D2amv2IPGu47iJapfsoelT+x+kgzmtyqzkT9Wef+L/yvR+cths6RzHozdhRHzKJnyKKuMg8GW45zX1uiv7Fa5g3ii6qkM8J/AjVBv01LUfI1G+eHPFBYSMDGjvloIlvgwUX3WDFziA4abm63EWIMoAYEwBNXwwEv29QeLkEjd8PBgzxv2Ah6h+s+BsAJzNZ3dBFNTGeqDAymJK4S0QiKyodM+6MfEBmi0gFGTvvBZUWLcR3vGjPFVaomjhFt1hgDCVUyZJcssdhUUhSK5lhYhxuTN1wXZp2qpPIEsYZpaCIMcumiFg3UkhIFbq1MR77+AeIsQoRlTPtI/IFUjSxfcLn8AjBK7EiTTuU8VoLEzAaoohqV6TSlS91hArRKRF1+n4ZlDAcvEJ7rcHVlqNU0eleLvc28y83A3+RUxCIQgwaQENoBI2hCcQhAQrLI6nV+Ip1RCQTjs5X26NSlFFsc8xEVC3lEhF/wu38tb5pbKytsHBbydd+MJjk0ppIaI49LsbniUpEdZ1ia4Kmj0xtnetJAwAA') format('woff2'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff?t=1619416948083') format('woff'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.ttf?t=1619416948083') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('//at.alicdn.com/t/font_2512718_n1u318gm1b.svg?t=1619416948083#iconfont') format('svg'); /* iOS 4.1- */ }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-zhaoshangxiaochengxu-mimabukejian:before {content: "\e62f"; }.icon-zhaoshangxiaochengxu-shanchu:before {content: "\e632"; }.icon-xiaochengxu_tubiao:before {content: "\e604"; }.icon-xiaochengxu_tubiao1:before {content: "\e605"; }.icon-xiaochengxu_tubiao2:before {content: "\e606"; }.icon-houtaishezhi:before {content: "\e6d8"; }.icon-miniappdev:before {content: "\e91b"; }.icon-xiaochengxu:before {content: "\e685"; }.icon-dianzan:before {content: "\e601"; }

然后 把這代碼放到 iconfont.wxss里
完整:iconfont.wxss

@font-face {font-family: 'iconfont'; /* project id 2512718 */src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot');src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff2') format('woff2'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff') format('woff'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.ttf') format('truetype'),url('//at.alicdn.com/t/font_2512718_n1u318gm1b.svg#iconfont') format('svg'); } .iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-zhaoshangxiaochengxu-mimabukejian:before {content: "\e62f"; }.icon-zhaoshangxiaochengxu-shanchu:before {content: "\e632"; }.icon-xiaochengxu_tubiao:before {content: "\e604"; }.icon-xiaochengxu_tubiao1:before {content: "\e605"; }.icon-xiaochengxu_tubiao2:before {content: "\e606"; }.icon-houtaishezhi:before {content: "\e6d8"; }.icon-miniappdev:before {content: "\e91b"; }.icon-xiaochengxu:before {content: "\e685"; }.icon-dianzan:before {content: "\e601"; }

第二步:引用

比如:在wxml文件里引用圖標(圖標名)

<text><text class="iconfont icon-xiaochengxu_tubiao"></text></text>

(圖標名 icon-xiaochengxu_tubiao )復(fù)制圖表下的代碼就行

第三步,在app.wxss里引用新建的iconfont.wxss文件

//注意符號格式 @import"/pages/iconfont/iconfont.wxss";

預(yù)覽效果:

更多問題點贊留言,哈哈哈

總結(jié)

以上是生活随笔為你收集整理的小程序引用icon图标(入门)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。