微信小程序 | 如何使用iconfont

iconfont 的优势:

  1. 文件加载体积小
  2. icon为矢量图,较点阵图来说更细腻
  3. 可以通过 CSS 来控制 icon 的大小和颜色,如果需要多个尺寸缩放的 icon ,那么 iconfont 是一个非常好的解决方案
  4. 支持一些 CSS 对文字的效果,例如:阴影、旋转、透明度等
  5. 对低版本浏览器兼容较好

iconfont 的劣势:

  1. 图标只能是纯色的,不能使用渐变色。
  2. 制作门槛高,耗时,维护成本高。

但为了降低 iconfont 的使用成本,我们不必非要自己会制作才能用上 iconfont 。

第一步:获取 iconfont

阿里巴巴矢量图标库:https://www.iconfont.cn

你可以从这个网站搜索到你想要的图标,如果你需要风格统一的 icon ,那么从一个图标库中获取可能会比较好。

选择你需要的图标,点击加入购物车

从购物车中下载你已经选择的 icon

点击下载代码,将得到名为download.zip的压缩包,解压后得到以下内容:

至此,获取 iconfont 的第一步就完成了

 

第二步:转换 ttf 文件为 base64 格式

网站:https://transfonter.org

下载转换后的文件

得到转换后的压缩包,名为transfonter.org-开头。解压可以得到如下图的几个文件:

至此,我们已经将 ttf 文件转换为 base64 编码格式。

 

第三步:在微信小程序中使用

为了演示效果,我新建了一个微信小程序。

现在,打开刚才下载的压缩包,将 stylesheet.css 的内容复制到 /page/index/index.wxss 中

再打开第一步从阿里巴巴矢量图标库下载到的文件(未经过转换的),找到 iconfont.css 文件,将除了蓝色的部分的代码全部复制,再粘贴到小程序的 /page/index/index.wxss 文件中。(@font-face这部分不要,只要下边的这部分。)

使用效果

 

附录代码

wxml 代码

<view class="iconfont icon-aixin" style="font-size:50px;color:blue"></view>

 

index.wxss 代码

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-aixin:before {
  content: "\e8ab";
}

.icon-bianji:before {
  content: "\e8ac";
}

.icon-Dyanjing:before {
  content: "\e8ad";
}

.icon-anquan:before {
  content: "\e8ae";
}

.icon-bangzhu:before {
  content: "\e8af";
}

.icon-buganxingqu:before {
  content: "\e8b0";
}

.icon-chenggong:before {
  content: "\e8b1";
}

.icon-dianhua:before {
  content: "\e8b2";
}

.icon-dianzan:before {
  content: "\e8b3";
}

.icon-dianying:before {
  content: "\e8b4";
}

.icon-ditu:before {
  content: "\e8b5";
}

 

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇