精选留言(37)

• 

  3.141516

  加班加点对第四种方法做了一些探索，实现了通过矢量字体自定义小程序的图标。整理了篇文章给大家参考：https://mp.weixin.qq.com/s/j4aF1rhGRRUzGxjUOLdnUg。
  
  主要补充了如何从 iconfont 拿到 font-face 远程链接和图片 Unicode 的部分，这一部分是课程中略过的。

  作者回复: 👍

  2020-05-22

  3

  20
• 

  William

  ## icon
  
  **自定义图标实现方式**
  
  1. 使用图片
    - 大量HTTP请求
    - 不方便修改样式
    - 图片放大会变虚
  2. 精灵图
  3. CSS绘制
    - 工作量大
    - 绘制时，需要统一一个中心点，否则控制位置比较麻烦
    - 不方便控制大小、颜色
  4. 矢量字体 👈 `最简单有效`
    - @font-face、 font-family
    - 点阵字体 vs 矢量字体(type 1、trueType、openType)
    - iconfont.cn
    - 小程序推荐 ttf、woff (woff2不兼容低版本iOS)
  5. SVG文件
    - image2base64
  6. canvas
    - canvas多用于制作动画
    - 用于自定义图标有些大材小用
    - [omijs - 将SVG绘制成图像的 Cax 引擎](https://github.com/Tencent/omi)
    - [dntzhang(张磊) - 微信开放社区](https://developers.weixin.qq.com/community/personal/oCJUsw6rFVEDMczhqQwmnqaWhcl4)
  
  WXSS加载图片及字体允许外域
  
  + [weui](https://weui.io/)
  
  

  作者回复: 👍

  2020-05-21

  2

  16
• 

  皮特尔

  - 使用图片
  - 使用精灵图，Sprite，也叫雪碧图
  - 使用CSS样式绘制
  - 使用iconfont等矢量字体文件
  - 使用SVG矢量文件

  作者回复: 👍

  2020-05-21

  

  4
• 

  左攀

  老师，会不会对wpvue开发小程序做一些解决和讲解，使用wpvue开发小程序是趋势吗

  作者回复: 推荐了解下kbone ，它已经成为小程序的标准扩展库之一了。刚刚又支持了react，它原本就是支持vue的~
  mpvue 看你需要，如果个人学，不如直接学kbone ；如果公司用另论，按公司来~

  2020-05-22

  

  3
• 

  Jay

  老师好， 我用的图标存在部分样式被我设置的color完全覆盖的问题，不知道怎么解决？
  
  <icon class="iconfont icon-rocket"></icon>
  <icon class="iconfont icon-Kobe"></icon>
  
  @font-face {
    font-family: 'iconfont'; /* project id 2073636 */
    src: url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.eot');
    src: url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.woff') format('woff'),
    url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2073636_x2qv1go5npr.svg#iconfont') format('svg');
  }
  
  .iconfont{
    font-family: 'iconfont';
    color: red;
    font-size: 100px;
  }
  
  .icon-rocket::before{
    content: '\e63b';
  }
  
  .icon-Kobe::before{
    content: '\e644';
    color: black;
  }

  作者回复: color: red;
  color: black;
  
  这种图标实现，属于控制CSS伪元素，before属于元素的伪元素。里面的color样式是能改变颜色的。如果要保留原样式，只有把color属性去掉了。

  2020-09-18

  

  2
• 

  Uforever.l

  我不知道最近为何访问github网站加载速度很慢，老师能否把课程克隆一份到gitee上？谢谢

  作者回复: 如果github慢，可以尝试从这里下载：https://gitee.com/rixingyike/weapp-practice/repository/archive/2.8_2.9-scroll-view
  包括这节课1.7节icon相关源码

  2020-05-24

  2

  2
• 

  InvisibleDes

  老师，我有一个问题，我完成作业了，成功在小程序里显示了图标；但这个图标很丑，我用的图标是一个柠檬，🍋像这样，叶子是绿色的，果实是黄色的；但在我小程序里显示的图标，只能显示一种颜色，要么全是绿色，要么全是黄色，取决于color这个属性，怎么才能显示好看的柠檬呢？

  作者回复: 可以用Sketch 等矢量软件自行编辑

  2021-01-20

  

  1
• 

  二胖

  老师，我有个小程序js动态改变公共样式的需求，求指点思路

  作者回复: 如果控制的样式不复杂，可以考虑用样式变量。

  2020-06-17

  2

  1
• 

  Geek_b39a17

  👍
  

  2020-05-27

  

  1
• 

  3.141516

  提醒下，导入课程 demo 的时候会提示对应账号登录，这个时候把 appid 改成测试用的就行了。
  
  为什么感觉第五种方式更加简洁，直接下载，转 base64，粘贴到 background 即可
  
  另外第四种方案，那些字体是已经在 cdn 中的吗。。

  作者回复: 👍是的
  是的，第5种不方便修改，转麻烦~
  alicdn

  2020-05-21

  4

  1
• 

  fanjl

  建议老师把类似本节课的几种方案画个思维导图放屏幕上，看得更直观和清晰一点。在字幕里听了后面的前面的就忘了，哈哈

  作者回复: 是的，这是个好建议。我原打算每一个视频只讲一个问题，并且不超过10分钟，但是内容总是降不下来~

  2020-05-21

  

  1
• 

  Allen

  这节课比较有价值

  作者回复: 谢谢，努力对住评价~

  2020-05-21

  

  1
• 

  九三

  老师，iPhone6 是375吧

  作者回复: 是的，750的一半，375

  2020-05-20

  3

  1
• 

  Anttrush

  老师好！
  我照着做，实现了第四种font-face的方法，但是同一张图第五种SVG没有成功。下面是我的操作步骤，麻烦老师看看哪里有问题。谢谢。
  1. 在iconfont上找到图标，下载svg文件；
  2. 在https://www.sojson.com/image2base64.html上选择文件，上传刚刚的.svg文件；
  3. 复制上面这个网站下方框体里出现的字符串，data:image/svg+xml;base64,PD94b（中间省略）nPg==
  4. 在wxss文件中插入
  .svg-icon{
    background: url("data:image/svg+xml;base64,PD94b（中间省略）nPg==");
  }
  5. 在wxml文件中插入
   <view>
      <icon class="svg-icon"></icon>
    </view>
  以上为全部操作，但是图标没有加载出来，开发工具下面也没有报错。另，对比视频中的样例代码，加上.svg-icon里面其他属性比如display等，依然没有加载出来。请问可能是什么原因？谢谢老师！

  作者回复: 注意CSS样式的宽高属性：
  
  .svg-icon {
      width: 32px;
      height: 32px;
      background: url(...);
  }
  
  示例代码链接：
  https:&#47;&#47;developers.weixin.qq.com&#47;s&#47;EaB161mB7bvZ

  2021-11-21

  

  
• 

  罗伯特

  https://www.jianshu.com/p/edcc50590e0d
  
  1， 在 www.iconfont.cn 建一个项目
  
  2. 获得该项目的 js路径
  
  3, 添加选中的图标到 该项目中
  
  4， 同步icontfont网站上该项目的icon到本地
  npx iconfont-wechat

  作者回复: 给你点个赞，
  都有mini-program-iconfont-cli专门的组件了~

  2021-09-28

  

  
• 

  你好，阳光

  我在windows上引用iconfont发现ttf和woff格式字体文件不兼容，需要truetype格式才行

  作者回复: 点赞.jpg

  2021-08-11

  

  
• 

  辣么大

  已经完成老师的作业，下一节gogogo

  作者回复: 冲冲冲
  --
  结课部落晒证书，赠书在路上等你~

  2021-07-15

  

  
• 

  Geek_43465e

  老师，iconfont.cn本就有精美图标，引用过来没有颜色或者只能控制一种颜色，有怎么操作能把iconfont中的图标完全拿过来使用

  作者回复: 我可能没有完全get到你的问题。
  默认有一个默认色，或者通过WXSS样式改变它的整体颜色，颜色复杂的可以用图片。

  2021-07-15

  

  
• 

  梦幻空花

  老师，你好，我在使用阿里自定义图标的时候遇到了以下问题：
  [渲染层网络层错误] Failed to load local font resource /pages/index/iconfont.ttf-do-not-use-local-path-./pages/index/index.wxss&25&7
   net::ERR_CACHE_MISS
  (env: Windows,mp,1.05.2105170; lib: 2.17.3)
  我是选择使用矢量字体的形式，复制base64后的方式来展示的，结果出现了上面的错误，不知道那里出现了问题

  作者回复: 根据提示：
  “Failed to load local font resource”
  “do-not-use-local-path”
  是不是有加载本地字体文件，可以全文检索一下字体名
  
  

  2021-06-14

  

  
• 

  说山不是山

  老师您好，请问没有基础的可以学吗？

  作者回复: 你都学到这里了，当然可以~

  2021-03-28

  2

  