关于uni-app:uniapp使用icon

1.开发环境 uni-app
2.电脑系统 windows10专业版
3.在应用 uni-app开发的过程中,咱们总是会应用到icon,上面我来分享一下在uni-app开发应用icon,心愿对你有所帮忙!
4.在这里我抉择的字体库是阿里巴巴矢量库,登录,把图标下载下来

5.下载完了之后关上文件，除了iconfont.css其余文件一律删除

6.回到本人的iconfont我的项目，抉择unicode点击生成代码

7.生成结束之后点击复制代码

8.回到iconfont.css并且关上css文件，留神红框内容，全副删除，替换成第五步刚刚复制过去的

9.替换结束之后，须要在//at后面加上https:

10.在页面中应用iconfont,代码如下:

<template>
    <view class="content">
        <text class="iconfont iconche-copy"></text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>

/抉择iconfont.css所在的门路/

    @import '../../static/icon/iconfont.css';
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

11.效果图如下:

12.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!