我们做项目的时候有时会要求用到彩色的字体图标symbol。
我在基于vue-cli的移动端项目中遇到了此问题,还牵扯到了li遍历动态添加iconfont的问题,折磨许久最终总结出以下问题
1.引入iconfont.css与iconfont.js文件(可写在你使用icon的.vue页面,也可以引到最外层的app.vue里面)
2.加入通用css代码(引入一次就行):
.icon{
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin:0 auto;/*px*/
63px;
height: 63px;
}
3.挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use :xlink:href="#icon-shouyekuang-"></use> </svg>
4.动态添加symbol图标,我把我遍历的方法粘贴出来供大家参考
主要是移动端导航的切换,更改当前点击的icon颜色
<ul class="iconfont"> <li v-for="(nav,$index) in list"> <router-link :class="{tabTactive:nav.href==currentUrl()}" v-bind:to="nav.href"> <svg class="icon" aria-hidden="true"> <use :xlink:href="nav.href==currentUrl() ? nav.srcActive : nav.src"></use> </svg> <span>{{nav.name}}</span> </router-link> </li> </ul>
export default {
data () {
return {
list: [
{
name: '首页',
href: '/',
src: '#icon-shouyekuang-',
srcActive: '#icon-shouyeshuang-'
},
{
name: '客服',
href: '',
src: '#icon-kefudan-',
srcActive: '#icon-kefushuang-'
},
{
name: '购物车',
href: '/cart',
src: '#icon-gouwuchedan-',
srcActive: '#icon-gouwucheshuang-'
}
]
}
},
methods: {
currentUrl () {
var curUrl = window.location.pathname
return curUrl
}
}
}
以上就是我费劲扒拉弄出来的东西,希望有人能用上