字体库创建
- 登录阿里图标库后，创建一个测试项目，如下图
- 点击项目设置，调整icon前缀和字体（阅读icon 源码后，需要按照如下图设置），点击保存
- 生成在线代码
- 打开在线地址，更新项目时需要使用
以上4步操作，基本可以满足图标替换。用户可以在我的项目中上传自己的图标或者从图标库自行搜索添加
自己项目使用
以下示例为图鸟3.0 demo项目，自己项目接入流程类似
- 在src static 目录下创建iconFont.css 文件
- 创建阿里字体库第四步打开的页面地址中的内容，粘贴到iconFont中。
注意事项： iconFont 样式要移除，[class*=tn-icon-] 样式需要保留
[class*=tn-icon-] {
font-family: tuniaoFont !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
text-align: center;
text-decoration: none
}
/* 以上 需要保留 */
/* 以下为阿里图标库在线代码，阿里iconfont 样式移除 */
@font-face {
font-family: "tuniaoFont"; /* Project id 4418810 */
src: url('//at.alicdn.com/t/c/font_4418810_w83rfqqzan.woff2?t=1705885019899') format('woff2'),
url('//at.alicdn.com/t/c/font_4418810_w83rfqqzan.woff?t=1705885019899') format('woff'),
url('//at.alicdn.com/t/c/font_4418810_w83rfqqzan.ttf?t=1705885019899') format('truetype');
}
.tn-icon-home:before {
content: "\e690";
}
- App.vue 中引入样式，如下图
// #ifdef APP-PLUS
import '@/static/iconfont.css'
// #endif
// #ifndef APP-PLUS
import '@/static/iconfont.css'
// #endif
- 首页将第一个icon 替换为home
- npm run dev:mp-weixin
- 以下为优化后的效果图
总结
要解决问题，查看源码是一个重要的策略，因为它可以帮助我们避免走很多弯路。源代码提供了关于程序运行的详细信息，包括算法、数据结构和实现细节。通过仔细研究源码，我们可以更好地理解问题的本质，并找到解决方案的线索。这种方法有助于我们发现潜在的错误、优化性能，甚至提出改进建议。虽然有时候源码可能很复杂，但通过阅读和分析，我们可以逐步揭示其中的奥秘。因此，在面临问题时，不妨花时间仔细研究源码，这可以为我们节省时间和精力，并帮助我们更好地解决问题。
