美文网首页
01-微信小程序中使用iconfont

01-微信小程序中使用iconfont

作者: 欢乐毅城 | 来源:发表于2019-02-27 17:10 被阅读0次
方式一：

（\color{red}{将ttf文件转换成base64}）------ transfonter.org官网

步骤：

（1）iconfont官网下载字体图标代码：


1.png

（2）解压文件，并将\color{red}{iconfont.ttf}文件转化为\color{red}{base64}： 跳转到https://transfonter.org
    2.1选择上存iconfont.ttf文件：

02.png
03.png

（3） 在小程序里的静态资源文件夹里( \color{red}{lib})新建一个叫 \color{blue}{iconfont.wxss }样式文件，将 上面解压出来的 \color{red}{stylesheet.css} 里面的内容全部拷贝到 iconfont.wxss 中，另外，还记得我们上面说的 \color{red}{iconfont.css } 吗？这时候就要派上用场了，我们打开 iconfont.css 这个样式文件，将下面的样式，也就是我用红框标注的内容复制到 iconfont.wxss 文件里， \color{red}{注意 } 上面(@font-face里面)的 \color{red}{不 }需要复制！！

04.png
（4）在中全局引入: 
  @import './lib/iconfont.wxss';

注意：\color{red}{自定义组件中若要使用，需单独引入？ }

使用例子：  

     <i class="iconfont icon-cha"></i>

相关文章

网友评论

      本文标题：01-微信小程序中使用iconfont

      本文链接：https://www.haomeiwen.com/subject/aiyxuqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|01-微信小程序中使用iconfont|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！