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

说明

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

猜您想看

  • CentOS7下Git编译安装踩坑记录

    最新安装gitea,CentOS默认的git版本是1.8,无法使用,需要安装2.x版本,踩了一些坑,特此记录。

    2022年11月29日
  • VoLTE功能的实现以及三大运营商的VoLTE布局

    Voice over LTE,是运营商基于4G网络,通过IP传输技术,实现数据、语音、视频及短/彩信业务的统一承载。可提供高清语音、视频通话等业务服务。是具备高安全可靠、品质保障的基础通信业务。

    2019年01月29日
  • 三星(SAMSUNG)970 EVO Plus使用体验

    如题,前一阵子在狗东三星自营420购入一块三星(SAMSUNG)250GB SSD固态硬盘 M.2接口(NVMe协议) 970 EVO Plus,与之前买的西数128G SATA固态一起服役。

    2020年01月16日
  • StarUML5.X-3.X破解方法

    说明StarU...

    2020年07月12日
  • Android Studio报错error:connection timed out

    在构建Android项目的时候,底部的状态栏总是会显示connection timed out或Could not download xxx等问题,这是由于国内网络问题导致第三方依赖下载不上,特此记录其解决办法。

    2019年10月18日
  • markdown语法大全

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

    2019年01月24日

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...