关于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,心愿对你有所帮忙,让咱们一起致力走向巅峰!