微信小程序使用font-awesome图标库
来源:互联网 发布:网络监控服务器搭建 编辑:程序博客网 时间:2024/05/31 19:40
微信小程序使用font-awesome图标库
网上看到的方法,亲测成功:参考方法
下载
font-awesome
字体包打开Transfonter网站,上传字体
fontawesome-webfont.ttf
(理论其它文件格式也可以转换,并未尝试),选择base64编码,convertconvert完毕后点击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
0 0
- 微信小程序使用font-awesome图标库
- 图标库font-Awesome使用教程
- 使用Font Awesome
- Font Awesome 使用
- font-face使用阿里图标库
- awesome图标库
- 使用font-awesome小图标
- Font Awesome图标字体使用
- Font Awesome插件的使用
- Font Awesome 图标使用总结
- 使用图标字体Font Awesome
- font-awesome
- Font Awesome
- font awesome
- Font Awesome
- font-Awesome
- 在Android中使用Font-Awesome
- Font Awesome 在IE8下使用
- elasticsearch 自定义索引 _all 设置规则
- 在Servlet使用getServletContext()获取ServletContext对象出现java.lang.NullPointerException(空指针)异常的解决办法
- Spring-mybatis事务配置
- 【Android 基础】RecyclerView 概述以及使用步骤
- 58-System V 消息队列
- 微信小程序使用font-awesome图标库
- poj_2828 Buy Tickets(线段树)
- Program "g++" not found in PATH
- Leetcode 282, Expression Add Operators
- Java考试题之三
- JPEG系列二 JPEG文件中的EXIF(下)
- jQuery遮罩效果
- JavaWeb总结二十七、jsp简单标签开发案例和打包
- 分词效果的评测算法(原创)