• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 小程序开发可以使用小程序自定义图标吗?

小程序开发可以使用小程序自定义图标吗?

时间:2023-07-01 14:05 阅读数:92 人阅读 分类:知识百科

  小程序开发的时候,由于系统本身的图标并不是那么美观,所以很多小程序开发者想要使用小程序自定义图标,那么要如何使用呢?看完以下资料就知道了。

  相关讨论一:字体文件无法加载,确认文件是存在的

  @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- */

  }

  在小程序开发中到底能不能使用小程序自定义图标呢?如果能,该如何使用呢?相信大家看完以上资料都能了解了吧,更多相关资料请关注微信小程序素材网。

  

  怎样设置微信小程序tab图标

  微信小程序icon图标开发及相关内容

  如何解决微信小程序导航只有图标问题?