微信小程序中引用FontAwesome字体
来源:互联网 发布:网络阅读媒介有哪些 编辑:程序博客网 时间:2024/05/20 18:53
1.到Font Awesome官网下载字体包
官网链接:Font Awesome中文官网
2.打开1中下载的压缩包找到.ttf文件
如下图所示:
3.上传2中的字体文件到https://transfonter.org/,选择base64 编吗 ,convert后下载
如下图所示:
下一步
4.打开3中下载的文件,找到stylesheet.css
5.在桌面新建一个fontAwesome.wxss文件
6.打开4中的文件,复制里面的代码到5中的新建的fontAwesome.wxss文件中
stylesheet.css代码如下:
复制到fontAwesome.wxss中:
7.打开1中的文件font-awesome.css,复制里面的css(去掉@font-face部分)到新建的fontAwesome.wxss文件中(接着6中复制内容的后面)
font-awesome.css如下:
打开文件:
复制其余部分到fontAwesome.wxss
8.然后引入小程序中直接用就可以了
<view class="weui-cells weui-cells_after-title bug"> <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"> <view class="weui-cell__hd"> <icon class="fa fa-bug fa-lg" /> </view> <view class="weui-cell__bd">建议反馈</view> <view class="weui-cell__ft weui-cell__ft_in-access"></view> </navigator> </view>
效果图如下:
阅读全文
0 0
- 微信小程序中引用FontAwesome字体
- 微信小程序引用fontawesome字体
- 如何在angular2中引用FontAwesome字体中的图标?
- Axure中使用FontAwesome字体
- Axure中使用图标字体【FontAwesome】
- 微信小程序引用外部字体
- 在SVG中使用Bootstrap或FontAwesome图标字体
- FontAwesome字体介绍
- Axure安装FontAwesome字体
- 直接在 CSS 中引用 FONTAWESOME 图标(附码表)
- Android中使用FontAwesome
- android中使用fontawesome
- iOS开发- 巧用FontAwesome(图标,字体)
- iOS开发- 巧用FontAwesome(图标,字体)
- Fontawesome字体使用说明及其常用效果语法
- FontAwesome
- Swift SpriteKit 中使用 FontAwesome
- 微信小程序中使用阿里字体图标
- Server.MapPath()
- C++程序的编写和实现
- UVA
- 判断一个路径是否存在
- for in循环
- 微信小程序中引用FontAwesome字体
- git学习笔记整理-3-
- Mac L2TP VPN无法连接问题
- 畅通工程||HDU1863
- 使用CRF++进行命名实体识别
- Linux环境下通过rpm安装gcc的顺序
- JUnit单元测试
- 寻找范围内”合数“
- android多语言国际化