微信小程序使用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日,已超过549天没有更新,若内容或图片失效,请留言反馈。

说明

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用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)

猜您想看

  • python poetry配置国内镜像

    poetry默认的源总是超时,修改一下国内源。

    2024年12月19日
  • JMeter压力测试工具初体验

    Apache JMeter是Apache组织开发的基于Java的压力测试工具。

    2020年07月12日
  • Nikon Z5 内置滤镜效果

    记录Nikon Z5相机的内置滤镜效果

    2021年09月20日
  • IntelliJ IDEA配置阿里云maven镜像

    如题,最近发现家里的网络不知道为什么使用maven特别慢,所以更换国内镜像。

    2020年02月19日
  • MacOS配置homebrew

    前两天买的Mac mini到货了,正好需要配置环境,折腾了一下,特此记录。

    2023年03月02日
  • 绕过校园网web认证

    校园网流量非常贵,不知道其他学校是什么情况, 本校10元3G,每个月给2.5G免费流量,且晚上十二点到早上六点断网。 学校的宽带也很贵,20M的一个月60,10M的一个月50,晚上十一点半到早上六点断网。

    2019年07月12日

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...