微信小程序使用font-awesome图标库

网上看到的方法，亲测成功：参考方法

下载font-awesome字体包
打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert

convert完毕后点击Download（下载神慢），下载得到的包中有stylesheet.css文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中

stylesheet.css

font-awesome.css

在写入app.wxss时将字体名改成了fa

/* app.wxss */
@font-face {
font-family: 'fa';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB......long long) format('truetype');
font-weight: normal;
font-style: normal;
}.fa {
font-family: "fa" !important;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}/* makes the font 33% larger relative to the icon container */
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}//long long long...........

然后在小程序中使用class="fa fa-flag"等font-awesome即可，如

<view class="head"><view class="title">微信小程序</view><view class="desc">添加font-awesome：<text class="fa fa-flag"></text></view>
</view>

此为上面实现的demo

微信小程序使用font-awesome图标库相关推荐

微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
【微信小程序】引入Base64 图标库
场景描述小程序icon图标需要使用base64编码后的icon,不使用png.jpg等格式的图片解决方法 1.进入阿里图标库 https://www.iconfont.cn/ 2. 创建一个项目 ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
uniapp 微信小程序使用antv f2图标库
进入 antv github 找到 wx-f2 这个仓库点击进入,然后进入 src 目录,将里面的组件文件复制到自己的项目中. 也就是: 在 uniapp 项目中的 wxcomponents 文件夹 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
小程序源码：网课查题微信小程序源码下载,题库资源丰富自动采集，支持语音拍照识别
这是一款网课查题微信小程序源码题库资源丰富自动采集, 支持语音拍照识别该款采用接口方式,所以题库自动全网采集而且该款小程序无需服务器和域名即可搭建大家解压源码然后使用微信开发者工具打开源码然 ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...

微信小程序使用font-awesome图标库

微信小程序使用font-awesome图标库

微信小程序使用font-awesome图标库相关推荐

最新文章

热门文章