标签：scss 文件 自定义 app uView iconfont uni 图标

uView已通过大量的实践中，收集了用户最有可能需要用到的图标，但我们也相信，它肯定无法覆盖所有的场景和需求。

用户也可以使用标签的方式，自行引入字体图标，为何要通过扩展的方式集成呢？

这是因为uView有统一的字体图标组件，使用方便，配置灵活，且风格统一。

一、下载图标文件

在 iconfont-阿里巴巴矢量图标库（https://www.iconfont.cn）下载图标文件

二、转换 iconfont.ttf 文件为 base64格式

1）打开Transfonter网站（https://transfonter.org）

2）点击 Add fonts 按钮 添加 ttf 文件并设置选项

3）添加完成后点击 Convert 按钮转换并下载文件

三、添加到 uniapp 项目 中的 uni.scss文件（可自行调整要放置的文件）

1）将转换后的 stylesheet.css 文件代码复制到 uni.scss 文件中

2）将 iconfont.css 的文件类名代码复制到 uni.scss 文件中

效果示例

四、页面使用

<!-- 通过 custom-prefix 指定类名为 test-icon -->

<u-button>
  <text style="padding-right: 4px;">自定义扩展图标</text>
  <u-icon color="#f00" name="msg" custom-prefix="test-icon"></u-icon>
</u-button>

效果图

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

标签：scss,文件,自定义,app,uView,iconfont,uni,图标
来源： https://blog.csdn.net/u013350495/article/details/115861194

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。