解决uView添加自定义图标不成功

这篇具有很好参考价值的文章主要介绍了解决uView添加自定义图标不成功。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自定义图标的添加方法:

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-文章来源地址https://www.toymoban.com/news/detail-490793.html

<u-icon custom-prefix="custom-icon-copy custom-icon"></u-icon>

到了这里,关于解决uView添加自定义图标不成功的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包