添加icon_uniapp 动态添加 icon 并且使icon拥有渐变色

在uniapp中使用iconfont很容就能实现

第一步创建一个图标库

第二步引入

在项目中的uni.scss文件中引入

@font-face {  font-family: 'iconfont';  /* project id 2189475 */  src: url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.eot');  src: url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.eot?#iefix') format('embedded-opentype'),  url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.woff2') format('woff2'),  url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.woff') format('woff'),  url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.ttf') format('truetype'),  url('https://at.alicdn.com/t/font_2189475_t6575ru4p2.svg#iconfont') format('svg');}.iconfont {  font-family: 'iconfont' !important;  font-size: 28rpx;  font-style: normal;  -webkit-font-smoothing: antialiased;  -webkit-text-stroke-width: 0.2px;  -moz-osx-font-smoothing: grayscale;}

记住关键要添加https:

第三步使用

UniCode方式使用icon

class="iconfont">

那么重点来了

我的icon数据是动态添加，想来就直接绑定了

class="iconfont">{{ item.icon }}</text>

这样写没有什么问题，但是显示的时候出现了如下图的问题

什么原因呢，当我们动态绑定的时候，unicode被同化为字符串了，怎么解决呢？

可以使用js写一个unicode转字符串的方法，如果你的icon是不是通过数据请求获取的，也可以手动更改，将     改为  \u

示例   改为  \ue70e

到此处，问题解决了

接下来讲一讲如何让icon拥有渐变色

先附上代码，再来解释为什么这样设置

      background-image: linear-gradient(225deg,#FFCB1A 0%,#FFA012 100%);      -webkit-background-clip: text;      color:transparent;

在你要使用icon的容器定义一个class，class添加上面的样式，看看效果吧

background-image: linear-gradient(225deg,#FFCB1A 0%,#FFA012 100%);使得容器背景从#FFCB1A渐变为#FFA012，225deg是渐变方向，具体效果如何，快去试试吧。

-webkit-background-clip: text;意思是以区块内的文字做为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的背景将被裁剪

color:transparent;很好理解，文字颜色设置为全透明黑色

同color:rgba(0,0,0,0);效果一样

至此

最终效果

从橙色至黄色的渐变icon便大功告成了