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

说明

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

猜您想看

Windows11系统时间显示到秒

Windows11系统时间默认不显示到秒,记录一下

01

VScode编写C语言中文乱码问题

在VScode上写C语言,总是出现中文乱码问题,找了好多方法都不管用,最后发现了一个方法解决了问题,特此记录。

02

Python虚拟环境pipenv使用说明

最近需要写好几个Python项目,每个项目的环境都不一样,需要用虚拟环境,记录一下。

03

Nikon Z5 24-70 F4 S 套机入手体验

最近看到尼康Z5降价了,正好之前的7200D也用了五年,想换个全画幅了,购入体验一下。

04

StarUML5.X-3.X破解方法

说明StarU...

05

微信开放平台账号注销方法

最近需要注册一个公众号,发现邮箱都被占用了,需要将微信开放平台的邮箱释放,但是官方没有注销的入口,几经周折,最后终于注销,特此记录。

06

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...