问题描述

给Icon字体，添加一个渐变色。

解决问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
	<view>
  		<view>
			<text class="icon-guzhangliebiao cu-text-orange" style="font-size: 80rpx;"/>
			<view>故障列表</view>
		</view>
		<view>
			<text class="icon-repair cu-text-red" style="font-size: 80rpx;"/>
			<view>故障处理</view>
		</view>
	</view>
</template>
<style scoped>
	.cu-text-orange {
		background-image: -webkit-linear-gradient(45deg, #F0B11B, #FFD673);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.cu-text-red {
		background-image: -webkit-linear-gradient(45deg, #FF4747, #ffff7f);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>

效果图

效果展示图