自定义图标的添加方法：
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
这里1.0版本和2.0版本教程都是一样的，估计是很长没动过了。
解决步骤：
1.先按照上述链接把图标css文件下载下来，然后把css中的修改成和官方教程中的一样
2.修改css中的类名，把custom-icon改成custom-icon-，（原理在最下面）
修改之后的， @font-face { /* 声明"custom-icon"字体 */ font-family: "custom-icon"; src: url('data:application/x-font-woff2;charset=utf-8;base64,xxxxxxxx') format('woff2'); } .custom-icon- { /* 引用上面声明的"custom-icon"字体 */ font-family: "custom-icon" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 字体图标的前缀为"custom-icon-" */ .custom-icon-copy:before { content: "\e641"; }3.写代码，把图标引入进去，注意这里用的代码和官方的不同
<u-icon custom-prefix="custom-icon-copy custom-icon"></u-icon>原理（可以不看）：
官方说的给两个值，一个是custom-prefix，一个是name，其实在内部合并成了custom-prefix-name。举例：
<u-icon custom-prefix="custom-icon" name="copy"></u-icon>在组件u-icon内部处理出两个参数，一个是uClasses，是个类组成的数组，这里会push进去custom-prefix加上-和name拼接成的类名，也就是第一步的css中类名；一个是icon，自定义图标下用的是name。
也就是参数传递进去的组件和下面的一样
<text class="custom-icon-copy" >copy</text>这样自定义图标是出不来的。换个写法就行了，同时不把name传递进去，因为图标遮不住这个参数name的文字。
<text class="custom-icon-copy custom-icon" ></text>所以写法应该是这样的。之所以在第一步把css的类名后面加-，是因为组件u-icon内部会自己拼接上减号，custom-icon传进去会变成custom-icon-
<u-icon custom-prefix="custom-icon-copy custom-icon"></u-icon>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
