开发过程中能使用微信小程序自定义icon吗？
微信小程序开发过程中要注意很多方面的问题，那么小程序开发的时候能不能使用微信小程序自定义icon呢?一起来看看相关资料吧。
在小程序开发过程中，自定义icon字体是支持的，但是需要使用线上字体，并且存放字体的服务器需要允许跨域。
相关讨论一：字体文件无法加载，确认文件是存在的
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/fonts/glyphicons-halflings-regular.eot');
src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
控制台报错
VM884:2 Failed to load font 1701630871.debug.open.wei ... flings-regular.woff : the server responded with a status of 404 (HTTP/1.1 404 Not Found)
From server 127.0.0.1
文件确实存在的，其他jpg/png图片文件都没问题是bug，还是限制了这些文件类型?
字体文件要放在网络上请求。
相关讨论二：
小程序使用字体图标的方法分享
一、先到阿里巴巴矢量图标库生成自己的字体图标，并下载下来，找到ttf格式文件
二、把字体文件转化成base64格式
三、在wxss文件中引入
四、在wxml加入字体
五、显示效果
相关讨论二：
直接引用不行，本地远程的都不行
相关讨论三：input更改字体无效第一个是textarea 第二个是input 第三个是text 用的是缅文, 已经在app.wxss设置了@font-face 结果发现input无法设置字体
input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family;
微信小程序商店的官方文档有说明
相关讨论四：小程序里使用 iconfont，font-face的src能使用网络地址吗?
@font-face {
font-family: 'fontello';
src: url('cdn.example/iconfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
line-height: 1;
}
发现src如果用网络地址就不能在iOS上显示，Android和开发工具上是可以的。src用base64值则都是可以显示的。
ios要使用s的连接的
相关讨论五：小程序可以使用font-awesome来做icon么?能不能用icon-font来做icon，如果不能话有什么好的方案来做icon?
可以， 字体放入到服务器， 远程地址引用就可以了， 例如：
@font-face {font-family: "iconfont";
src: url('//at.alicdn/t/xxx.eot?t=1482899691162'); /* IE9*/
src: url('//at.alicdn/t/xxx.eot?t=1482899691162#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn/t/xxx.woff?t=1482899691162') format('woff'), /* chrome, firefox */
url('//at.alicdn/t/xxx.ttf?t=1482899691162') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn/xxx.svg?t=1482899691162#iconfont') format('svg'); /* iOS 4.1- */
}
以上就是关于小程序开发时使用微信小程序自定义icon的全部内容，怎么样，想要进行自定义icon的设置是不是很简单呢?对照步骤操作就可以了。
微信小程序icon图标开发及相关内容
怎么进行微信小程序icon引入
微信小程序icon图标组件说明，小程序icon图标使用方法