微信小程序如何套用iconfont

前言
如果你在开发微信时,没有图标的话,可以到http://www.iconfont.cn/ 官方下使用图标,那么我们去使用一些吧,到官方网址下点击使用~


下载代码即可使用,看看下载的文件吧。

如图可以用demo_fontclass.html下的例子。打开微信小程序开发工具。

接下来使用代码:
<!--index.wxml-->
<view class="container">
<view>广州塔<i class="iconfont icon-ziyuan"></i></view>
</view>
/**index.wxss**/
@import '../iconfont/iconfont.wxss';
效果图:

结语
- 你完成了吗?是不是,很容易呢?是不是很简单呢?
微信小程序如何套用iconfont的更多相关文章
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 微信小程序如何引用iconfont图标
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- 微信小程序如何使用iconfont阿里巴巴图标库?
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...
- 微信小程序内容组件图标 icon
小程序内置了一下图标可以用 需要自定义图标的看这里 ==>微信小程序中使用iconfont/font-awesome等自定义字体图标 小程序内置图标使用示例 <icon type=&quo ...
- 微信小程序项目wx-store代码详解
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
- 微信小程序如何引入外部字体库iconfont的图标
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
随机推荐
- AOP方法增强自身内部方法调用无效 SpringCache 例子
开启注解@EnableCaChing,配置CacheManager,结合注解@Cacheable,@CacheEvit,@CachePut对数据进行缓存操作 缺点:内部调用,非Public方法上使用注 ...
- 用element-ui 时,报value.getTime is not a function错误:
在用element-ui 时,报value.getTime is not a function错误:错误分析:date-picker 的时间是格林威时间,如果Thu Jun 22 2017 19:07 ...
- html2canvas
最近公司有个需求,实现html 页面元素转为png图像,这边用了html2canvas来实现.,这里记录一下,避免以后忘了~~ 官网链接: http://html2canvas.hertzen.com ...
- NLTK 统计词频
import nltk Freq_dist_nltk = nltk.FreqDist(list) for k,y in Freq_dist_nltk: print str(k),str(y)
- CentOS开机报错:sd 0:0:0:0: [sda] Assuming drive cache: write through
解决方法: vim /etc/default/grub 文件里去掉 rhgb 参数. [root@lb-nginx- ~/]#vim /etc/default/grub GRUB_TIMEOUT= G ...
- Codeforces Round #449 (Div. 2)
Codeforces Round #449 (Div. 2) https://codeforces.com/contest/897 A #include<bits/stdc++.h> us ...
- Willem, Chtholly and Seniorious
Willem, Chtholly and Seniorious https://codeforces.com/contest/897/problem/E time limit per test 2 s ...
- 100-days: thirteen
Title: “The Godfather turns 50” <教父>50周年 turn 达到某个年龄 Mario Puzo's(马里奥·普佐) "The Godfather ...
- 648. Replace Words 替换成为原来的单词
[抄题]: In English, we have a concept called root, which can be followed by some other words to form a ...
- maven插件后报错:org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project
在给eclipse换了高版本的maven插件后,引入jar包报如下的错误: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache ...