2025年字体的图标（字体图标怎么使用）

科技前沿 • 2025-05-18 15:29 • 阅读 42
大家好，我是讯享网，很高兴认识大家。
 <p>icon font UI 设计 字体图标 小程序开发 微信小程序</p><p>- -</p><p>文 | 我的代码有点烂</p><p>图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。</p><p>但是，这些服务基本都是在 web 前端使用。而要在微信小程序中使用，需要进行简单的移植。</p><p>今天，知晓程序（微信号 zxcx0101）的这篇文章，就来教你如何在小程序中使用图标字体。</p><p>工具</p><p><strong>由于小程序具有体积限制，我们需要对相应文件进行压缩。</strong>这样，才能更方便地将图标字体引入至小程序中。</p><p>在此，我们推荐一个在线工具：http://fontello.com/ 。<strong>它可以将不需要的图标从字体中排除</strong>，这样，就能有效减少字体文件体积大小。</p><p>配置</p><p>我们将生成好的图标字体文件下载回来，然后打开这个文件夹，看看它的目录结构是怎样的。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcrawl.ws.126.net%2Fd0cb8f4755b20b4b2d1c0baeb4%2Ff31a0e0e83b56f8429d20dee66a88313.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>在这里，我们只需要 的 Base 64 编码文本，以及 的部分图标字体代码。</p><p>转码</p><p>转成 Base 64 很简单，只需要一行指令就可以了。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcrawl.ws.126.net%2Fd0cb8f4755b20b4b2d1c0baeb4%2Ff17286fd1f7938de7388e2.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>引入</p><p><strong>我们首先提取出 开头的 CSS 类，因为这些是不需要经过改动的。</strong>比如这样：</p><p></p><p>然后，<strong>我们将这些代码添加到一个新的 WXSS 文件</strong>，并在新建的 WXSS 文件开头，编写字体的引用：</p><p></p><p>再来一个字体样式的 CSS 类：</p><p> 使用</p><p>经过上边的处理，小程序就能正常使用这套图标了。<strong>我们就在 中导入这个 WXSS</strong>，供全局使用吧！</p><p></p><p>然后，我们就可以愉快地在小程序中，引用字体里面的图标啦！</p><p></p><p>原文地址：http://www.jianshu.com/p/e662</p><p><strong>关注「知晓程序」公众号，在微信后台回复</strong><strong>「Flex」，学习在小程序中进行排版的正确姿势</strong>。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcrawl.ws.126.net%2Fd0cb8f4755b20b4b2d1c0baeb4%2Fd4b936c3f4ba41e50373a692b57e2bf2.png&thumbnail=660x&quality=80&type=jpg"/><br/></p>
讯享网
2025年字体的图标（字体图标怎么使用）

相关推荐
