微信小程序 07 iconfont

7.1 iconfont

---

1. 在 阿里矢量图标库 里，新建一个 项目，然后把 需要的 图标 都传到 这个项目里。再去 下载 相关的 文件 到本地！
   

2. 改变一下 @font-face 里面的 url 路径。

3. 把 对应的 iconfont.css 改名为 iconfont.wxss 然后 在 app.wxss 里 使用 @import "xxxx" 进行导入。

4. 直接 在 text 里面 的 class 属性 就可以使用这些 图标了。

<view>
    <!-- 轮播图区域-->
    <swiper class="index-swiper" indicator-dots indicator-color='ivory'	indicator-active-color='#d43c33' autoplay>
        <swiper-item>
            <image src="/static/images/头像.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/static/images/头像.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/static/images/头像.jpg"></image>
        </swiper-item>
    </swiper>
<!--    view.类名 再按下 Tab 键 就能自动补全-->
    <view class="navContainer">
        <view class="navItem">
            <text class="iconfont icon-icon"></text>
            <text>每日推荐</text>
        </view>
        <view class="navItem">
            <text class="iconfont icon-gedan"></text>
            <text>歌单</text>
        </view>
        <view class="navItem">
            <text class="iconfont icon-31paixingbang"></text>
            <text>排行榜</text>
        </view>
        <view class="navItem">
            <text class="iconfont icon-diantai"></text>
            <text>电台</text>
        </view>
        <view class="navItem">
            <text class="iconfont icon-zhibo"></text>
            <text>直播</text>
        </view>
    </view>
</view>

/* pages/index/index.wxss */
.index-swiper {
    height: 300rpx;
    width: 100%;
}

.index-swiper image {
    width: 100%;
    height: 100%;
    
}

.navContainer {
    display: flex;
}

.navItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
}

.navItem .iconfont {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
    background: rgb(240,19,19);
    font-size: 50rpx;
    color: #fff;
    margin:20rpx 0;
}

.navItem text{
    font-size: 26rpx;
}