当前位置:   article > 正文

UniApp小程序引入iconfont字体图标(阿里巴巴矢量图标库)_uni-app小程序引入iconfont

uni-app小程序引入iconfont

小程序使用icon图标

uniapp在H5运行是可以的,但在小程序中会出错

1.在iconfont官网选择自己需要的图标,添加至项目中

2.打开项目设置

3.下载

只需要这段代码

  1. .iconfont {
  2. font-family: "iconfont" !important;
  3. font-size: 16px;
  4. font-style: normal;
  5. -webkit-font-smoothing: antialiased;
  6. -moz-osx-font-smoothing: grayscale;
  7. }
  8. .icon-youjiantou:before {
  9. content: "\e658";
  10. }
  11. .icon-a-44tubiao-14:before {
  12. content: "\e692";
  13. }

4.打开在线生成器

在线@font面生成器 — Transfonter

5.打开Base64编码

6.点击下载

7.下载之后解压,打开解压的文件夹,里面有个stylesheet.css文件

8.打开这个stylesheet.css文件

9.复制这个代码,放在刚才复制的代码的上面

  1. @font-face {
  2. font-family: 'iconfont';
  3. src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AA4AAAAABkwAAAJgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCUggEEQgKgXCBWgsMAAE2AiQDEgQgBYMVB0UbLQVRlA3GWLKPhNzE6iUYLIs2eU0TLugIqjWqrB7YOQBCeYrYIgpz/MRCASkkB6w+Yvynub2/UcXzRexuJgkteebgmZYonRaY/5txRRF8AG8JrKFZNsG2ZzLGet7z4xMM0A+MbnDecEFVSDqEgG/KwQcAvn/p5kJ6XgWhKdqDJGRyIUdCVOKqgmJMcY/oDr4o+1SeJpAUGQAtAcDK/ecUu182/nK9Qc0bZa1GADJk6IrAUrJAVz0jQaWSoHakrsV/cDo96fQAARAlAYiEBAAIyufPLcYg6loCBWiMHCPAAgA5hpNAiEiet27X5ESLY7ubNWp64vjj8x+fXR07+vDsJ00uDDnx5NyxxucHH358bsiRJ+GGT5xdHjz06OzHcxXresoNX865+8FdsWvP8kltrtVbKMacM5fEHZYPr+OJW224uiL6P/7zz8fLDcODvv339+97/HkFC89bB14kI6a+1JD7VX+xLL7y0CxhSbAMF1gGXcb/PBJvDgTv9L+/H7SY+m/VpDKWf//cmsrxZW0blQSCsq7DGxUoxyMAQF4xF6hQiXfTYIRCOxJICIGZBICmbgsQKq0RSBoMQSDTzweBXOV1AQpNfIZAqfKfTOSNhJbgg6S5LiCzmAFyLX1Bob3f2lJLf5XE1UXu6uIFyw6xLA4Dq2UKb63IA34uE4D5xQj7zQ+FDKMTVIyPNUelrNO5OI2O06l0Bjy/xPSSR5ExXajMZx3jnk53uabzndo1Bgit1x6eqmQnoxFUuEnF14Ra1Uua9DcLhBQpssbHru+6ii6v67sfcdN8veOQeuWaCQAA') format('woff2'),
  4. url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAASsAA4AAAAABkwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEkAAAABsAAAAcoWtStUdERUYAAARwAAAAHgAAAB4AKQALT1MvMgAAAbgAAABGAAAAVkpAZQtjbWFwAAACFAAAAEMAAAFS5m3qZWN2dCAAAAJYAAAABAAAAAQARAURZ2FzcAAABGgAAAAIAAAACP//AANnbHlmAAACaAAAAOQAAADw/atPR2hlYWQAAAFEAAAAMgAAADYo/nNDaGhlYQAAAXgAAAAdAAAAJA3vBwZobXR4AAACAAAAABIAAAASGioCDmxvY2EAAAJcAAAADAAAAAwAfADQbWF4cAAAAZgAAAAfAAAAIABJAEZuYW1lAAADTAAAAOUAAAGVyRaNxXBvc3QAAAQ0AAAAMQAAAEVVbgrEeNpjYGRgYADiM7z30+L5bb4ycHMwgMDDTVPEoLQBg8t/RjYztv9ALgcDE0gUADenCvYAAHjaY2BkYGD7/5+RYQcHAwiwmTEwMqACFgBWrgMIAAAAeNpjYGRgYGBlEGVgYgABEMnIABJzYNADCQAABeEAkAB42mNg5GBgnMDAysDAasw6k4GBUQ5CM19nSGMSYmBgYmBlZoADAQSTISDNNYXB4VnEs0nsDP8ZGHaw/QdRDIwgOQCTugvxAAAIAABEAAAAAAgAAAAIAAHKAioAAHjaY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiWcRzyb9/4/MklwtWQTVBQaMbAxwLiNIDxMDKmBkGPYAAALDC5wAAEQFEQAAACwALAAsAFAAeHjaFYyxTsMwGITvt2tHWZAimVDJi1OCkZAoUlIlS4YMGVHI0qmMDGzMPEY33oGFZO4TILEy8QosjChpai+f7r6TDgwNwJ7EFhwB1j3hrhqCBX6zXoqfauDMRfTca+H1EEgaq4G8z6MkukqipGHmmNLb8Vls/9+bxRcAos+ZZCFnREBIdiXVRUhSxXlWUrGR8fhidrXhzXgw9e3a8L3hrUO9M+PBOb/tzSOI3cy9+Jb3UIC4XF2T3biDPIvPVRBSrKR4JaunM63Zn05tuZw69qGLB19bh2VpUz11U6fbAjgBs1I6FnjafY4xTgMxEEXfJptABEKIIg2NG6poV16niXKAFJQU6aPIWa0UrSWH1NyCG3AGWo7BATgDNd/BNBSxNJ7n8Z/5A1zzSkE6BZfcZR5wwSzzkAdeMpfSvGceccVn5rHq31IW5USV21NX4gE33Gce8sg8cynNW+YRUz4yj1X/omNLoGd3up+h24Z+F3rRE56WI3s2RD19e9xvBKssTTlK4TE4aqzyUvF/5G/VsaCiUa4UVjHXKBmtQmy9cbU1S/NnLnSLqnGVs06yM0uuZR85SJK+jAzSIqx9PHShN01tz7X/ACf6PgQAAAB42mNgYkAGjAzogBUsysTIxMjMVZlfmpWZmFeSX8qbqGtiUlKalJmYr2toAgB2HwiNAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgntsWnkg+uGmKWJQ2gAAO/MGEgA=') format('woff'),
  5. url('iconfont.ttf') format('truetype');
  6. font-weight: normal;
  7. font-style: normal;
  8. font-display: swap;
  9. }

10.手动引入

@import "/iconfont.wxss";

11.运行效果

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/113986
推荐阅读
相关标签
  

闽ICP备14008679号