iconfont的简单使用实战底部tabbar

iconfont的使用步骤

1.在iconfont官网选择好所需要的图标后，选择下载代码

解压文件放入项目
放在项目下 src/assets/fonts (可放其他位置)

2.导入fontclass代码

在mian.js下

import './assets/fonts/iconfont.css'

3.打开解压出来的文件demo_index.html查看

选择Font class
有刚才添加的图片可以选择

4.使用图片

xxx 即图片对应后序

<span class="iconfont icon-xxx"></span>

5.实战练习

商城底部tabbar (当时在iconfont选漏了，所以首页和分类页用了同一个)

实现效果代码如下：

<template>
  <div class="g-tabbar">
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-shouye"></i>
      <span>首页</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/category">
      <i class="iconfont icon-shouye"></i>
      <span>分类页</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/cart">
      <i class="iconfont icon-cart_icon"></i>
      <span>购物车</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/personal">
      <i class="iconfont icon-wode"></i>
      <span>个人中心</span>
    </router-link>
  </div>
</template>

<style lang="less" scoped>
// 外框
.g-tabbar{
  position: relative;
  display: flex;
  width: 100%;
  height: 8vh;
  background-color: #fff;
}
// router-link，即每个选项
.g-tabbar-item{
  color: black;
  flex: 1;
  text-align: center;
  font-size: 2vh;
  // 图片样式
  i{
    margin: 6px 0px 3px 0px;
    font-size: 3vh;
    display: block;
  }
}
// 表示router-link激活选中时的状态
.router-link-active{
  color: #de181b;
}
</style>