1)首先,登录阿里巴巴iconfont.cn 2)新建项目 3)点击icon收藏 4)加入到test项目中   5)下载到本地解压   6)生成代码   7)复制iconfont.css到xxx.wxss 8)替换iconfont.css中的@font-face为上面的生成代码 9)xxx.wxss样式中@import使用 @import "../../../css/test.wxss"; 10)wxml中使用 <text class='iconfont icon-home' s

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('ico

微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size:icon的大小,单位px(2.4.0起支持rpx)[默认值23px] color:icon的颜色,同css的col

最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:https://transfonter.org/ 转换之后会生成三个文件: 第三步:将stylesheet.css中的全部代码(@font-face)以及之前下载iconfont文件中除了@font-face 以外的代码全部复制到小程序项目中新建的.wxss文件中: 第四步:在所需要的.wxss文件中通过

在微信小程序开发中,对于wx:for,可以使用wx:for-index="index"来获取数组中的元素的索引值(下标). <view class="item" wx:for="{{eventItems}}" wx:key="*this" wx:for-index="index"> ...... <view class="col-2"> <button si

大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方案 https://developers.weixin.qq.com/miniprogram/dev/api/ui-tabbar.html#wxsettabbarbadgeobject 可以更新图标,可以更新文字,可以动态更改上面的内容,不需要你重新粗制滥造tabbar了! 不过你想实现爱奇艺APP

首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入iconfont.wxss,然后其他地方就可以使用了

循环标签:wx:for <view wx:for="{{['aa','bb','cc']}}"> {{index}} {{item}} </view> 这里的 index 和 item是微信默认的,可以自定义: <view wx:for="{{['aa','bb','cc']}}" wx:for-index="a" wx:for-item="x"> {{a}} {{x}} </view

前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件1:找个其中的ttf格式的文件,然后打开https://transfonter.org/网站2:点击Add fonts按钮,加载ttf格式的那个文件3:选择下边的base64 encode改oof为on4:点击Convert按钮 进行转换5:转换后点击download下载6:下载下来后 找到stylesheet.css文件 添加类.iconfont { font-family: 'iconfont'; font-weight: 500

for循环中的参数,没法传到对应的 js里,所以直接在 wxml页面上跳转 发送参数的 wxml页面 <view class="uploader" wx:for="{{bookList}}" wx:for-item = "item"> <navigator url="../catalog/catalog?id={{item.id}}&title={{item.title}}" open-type=&q

(1)<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{index}}"> <view class="aaa">{{item}}</view> </block> array: [, , , , ] 循环结果: (2)<view></view> 接下来用view标签进行循

现在要完成这样的效果: 我的代码是: <view class="l-setlist clr" > <template name="listab"> <image src="{{pic}}" class="fl setpic"></image> <view class="fr"> <view class="listbox"&

wxml:           <block wx:for="{{data}}" wx:for-item="data">             <view>{{data.name}}</view>           </block>   js-data: data:[       {         name:"张三"       },       {         name:"李四

全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, clear <view class="group"> <block wx:for="{{iconSize}}"><icon type="success" size="{{item}}" />&

自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添加到维吾尔语了...新手跳坑指南<六十七>字体文件无法找到报404错误在微信小程序中使用字体图标/自定义字体/外部字体 相关插件:微信小程序实用组件:使用font-awesome字体,真机可用微信小程序demo:bootstrap字体样式使用 相关帖子:小程序里面能用阿里字体图标吗微信小程序中怎么

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容: 第二步:转换ttf文件

微信小程序,无论是字体图标还是图标,都差不多,只不过是为了以后字体图标修改方便,或者加效果方便而使用它而已! 1. 下载font-awesome http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip 2.解压后,找到fontawesome-webfont.ttf 3.然后进入以下网站进行格式转换 https://transfonter.org/ 4.下载到本地 5.把css文件提出来 6.新建一个wxss文件,然后把 font

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5

最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题 跳坑指南<七十>如何让微信小程序服务类目审核通过 跳坑六十九:uploadFile:fail Error: unable to verify the firs 跳坑<六十八>Cannot read property 'webviewId' of un 新手跳坑指南<六十七>字体文件无法找到报404错误 新手跳坑指南<六十六>:路径pa