Lin-ui引入自己想要的icon样式

官方文档:
通过外部样式类的方式来实现自定义图标:
1 将从iconfont下载的 css 代码放进 wxss 中;通过@font-face定义字体, font-family必须为:iconfont
2 设置带有content属性的 class 名为 l-icon-name:before的格式,(name是用来设置icon组件的name属性的,),如:.l-icon-duihao:before
3 在wxml中设置l-class属性为iconfont,name为在步骤2中设置的name,以步骤2为例,在wxml中的name需要设置为duihao

@font-face {
    font-family: "iconfont";
    src: url('iconfont.eot?t=1569576441125');
    /* IE9 */
    src: url('iconfont.eot?t=1569576441125#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABmQAAAJ2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQ0BNgIkAwgLBgAEIAWEbQczG7YFEdWLabK/IpJj9xskBUKoNvS0NL2fGoOTvFXum2pguSRiYn8/GG5DaXACAAAAAMTDf/ul9/2Zv5kQKkCVrAwqghIpRFWhgFWrXGVlhOrxLIGE3s4HAJLZEzyAsxqH7ZCZ1Y6uPUw0KtBmEvkAkyShINPA8ugzLM226lvgQfR1phk9NgnO77V0DrTvr8ffawGQQyYJVm4WHaNOmNAk48F/85Q9Sr/sNwUOp12gQO6Acrnn8rkUB5YGdM6xKLICCb1h7IIXeJ9Ah3FNsd2xc4rMXhaIh+5cUwoBWWbpIjQa9mbxjmqleoPzNvp+/F0UKnViV526vXPT+g/rZPHj38WAQEECOlwjoYlMnGtMnJAEoyUdiWyaY5UHP/ytwCSOqhfsr7NLu8AoFDyT0BM9amkFcjI8jtVJZ1J1DfRL54S9/b01Hi5CWczxymP7LhTcwuEGfTAbP82iFb0ao/lSICNCT4BZdNCSGv+03/hQPnmRGXx60YKWTAnKrp3BLxIO7MiG2DZWWRM2uirjk5ZW6NCBVtgz4PtUzfD9ZEIxfFeuNmMZkmKWmKlN1DotoKFYQ4d5e4c7DXokidyOOS8AQp/3qPQ4RNLnIzFTv6E24j8a+iKhw4XgzE7UwTM0RC/tX6bu2NU108flNwzvtbG8OKK/YHEKS55k5XSNHbbEhvgZClJF7dikAo9hXQ857ZjRMRnJs0xTbXpT0h2b8xgaohftX0zdsWswmL7y+RuG99pYR02d8wWL0+gil8gGEGvFPqjmUV6Jn6FAqlA7NlGBWVjXQ5zNs2Z0TIwTYmcpdXrpUEWyvWr7gXzWgK0Vjj3pyfMDEekcAAAA') format('woff2'),
        url('iconfont.woff?t=1569576441125') format('woff'),
        url('iconfont.ttf?t=1569576441125') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('iconfont.svg?t=1569576441125#iconfont') format('svg');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
}

.l-icon-duihao:before {
    content: "\e63c";
}
<!-- 下面的示例代码,虽然两个icon的name都为duihao
但是由于第二个设置了l-class属性,所以显示为不同的icon
只是做个示例,不要纠结name和图标相对应的问题 -->

<!-- lin-ui组件的duihao icon -->
<l-icon name='duihao' />
<!-- 自己从iconfont下载的duihao icon -->
<l-icon name='duihao' l-class='iconfont' />

我本身的困惑点在于"从iconfont下载的 css 代码",查资料后具体步骤如下:
1.加入购物车
在这里插入图片描述
2.添加至项目
在这里插入图片描述
3.选择Font class ,更新代码,首次可能是生成代码
在这里插入图片描述
4.点击复制代码,粘贴到浏览器
在这里插入图片描述
5.效果如下
在这里插入图片描述
6.粘贴到wxss,把.icon-yonghu:before更改为.l-icon-yonghu:before即可,在wxml中引用时加上l-class='iconfont’属性

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值