微信小程序使用fontawesome4.7图标方法
如默
撰写于 2023年 07月 18 日

说明

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用fontawesome4.7图标的方法。

步骤

这里说一下为啥不用v5或者v6版本,因为新版太多了,用不到那么多,v4.7都已经很多了,最主要的是,新版需要js支持,使用的时候需要安装很多依赖,网上说直接转换的那种方式,效果不太好,有的也用不了,4.7版本稳定且只需要css即可

懒人看这里:下载地址:fontawesome4.7 密码:h201

下载好之后直接放在小程序目录,在app.wxss文件里面引用即可,如下:

@import "assets/fontawesome4.7/fontawesome.wxss";
@import "assets/fontawesome4.7/stylesheet.wxss";

这样就可以直接使用了

自行配置

首先,附上fontawesome4.7图标官方地址:fontawesome

这里附上下载地址,fontawesome4.7

1,下载解压之后,找到fontawesome-webfont.ttf

2,进入以下网站进行格式转换,地址:transfonter,打开Base64 encode,Formats选项中的字体全部勾选,点击add fonts,选择刚刚下载的fontawesome-webfont.ttf,点击convert即可

3,转换之后的文件中,找到stylesheet.css文件,修改后缀名为wxss,得到stylesheet.wxss

4,下载的fontawesome4.7中css文件夹里font-awesome.css文件,复制这个文件里除了@font-face{}之外的其余全部内容,放在一个新的文件里,假设叫font-awesome.wxss文件

5,将3、4步得到的两个文件,放在小程序文件夹中,在app.wxss文件里面引用即可,如下:

@import "assets/fontawesome4.7/fontawesome.wxss";
@import "assets/fontawesome4.7/stylesheet.wxss";

最后

使用的时候如下:

<text class="fa fa-user"></text>

这样就可以了

微信小程序使用fontawesome4.7图标方法

温馨提示:

本文最后更新于2023年07月18日,已超过461天没有更新,若内容或图片失效,请留言反馈。

说明

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用fontawesome4.7图标的方法。

步骤

这里说一下为啥不用v5或者v6版本,因为新版太多了,用不到那么多,v4.7都已经很多了,最主要的是,新版需要js支持,使用的时候需要安装很多依赖,网上说直接转换的那种方式,效果不太好,有的也用不了,4.7版本稳定且只需要css即可

懒人看这里:下载地址:fontawesome4.7 密码:h201

下载好之后直接放在小程序目录,在app.wxss文件里面引用即可,如下:

@import "assets/fontawesome4.7/fontawesome.wxss";
@import "assets/fontawesome4.7/stylesheet.wxss";

这样就可以直接使用了

自行配置

首先,附上fontawesome4.7图标官方地址:fontawesome

这里附上下载地址,fontawesome4.7

1,下载解压之后,找到fontawesome-webfont.ttf

2,进入以下网站进行格式转换,地址:transfonter,打开Base64 encode,Formats选项中的字体全部勾选,点击add fonts,选择刚刚下载的fontawesome-webfont.ttf,点击convert即可

3,转换之后的文件中,找到stylesheet.css文件,修改后缀名为wxss,得到stylesheet.wxss

4,下载的fontawesome4.7中css文件夹里font-awesome.css文件,复制这个文件里除了@font-face{}之外的其余全部内容,放在一个新的文件里,假设叫font-awesome.wxss文件

5,将3、4步得到的两个文件,放在小程序文件夹中,在app.wxss文件里面引用即可,如下:

@import "assets/fontawesome4.7/fontawesome.wxss";
@import "assets/fontawesome4.7/stylesheet.wxss";

最后

使用的时候如下:

<text class="fa fa-user"></text>

这样就可以了


赞 (0)

猜您想看

  • 哔哩哔哩视频下载方式

    最近需要下载哔哩哔哩的视频,发现很多网页版的工具都带有不良插件,遂使用手机版进行下载,特此记录。

    2020年02月14日
  • 太平国家森林公园——记五一自驾游

    很早之前就计划五一出去玩,但是不知道去哪里。导师提到太平国家森林公园不错,遂决定前往。

    2019年05月14日
  • Docker指定latest标签

    之前发布了两个版本的docker文件,有1.0和2.0,默认使用latest标签应该指向最新的2.0版本,记录一下

    2023年05月30日
  • 组装移动固态硬盘体验

    最近发现平时用的U盘都满了,以前的硬盘也速度比较慢,正好国产固态很便宜,组装一个记录一下。

    2023年05月03日
  • 关于京东京造和耐时干电池的使用体验

    由于平时键盘和鼠标以及Xbox手柄用的都是干电池,所以也关注了市面上的很多电池,下面就记录一下使用情况,供大家参考。

    2024年04月28日
  • AMD R5 5600X装机记录

    在今年年初的时候,把电脑的硬件几乎都换了一遍,当时的工作比较忙,也没顾上记录,今天正好记录一下,补上为自己第二次装机之旅。

    2022年12月16日

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论

Vaptcha 初始化中...