uni-app x开发商城系统，Icon 图标

原创于 2025-10-16 16:41:00 发布 · 325 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

一、概述

基于字体的图标集，包含了大多数常见场景的图标。

官方文档：https://uview-plus.jiangruyi.com/components/icon.html

官方演示地址：https://uview-plus.jiangruyi.com/h5/#/pages/componentsA/icon/icon

二、导入iconfont 图标

扩展图标使用方式

<up-icon customPrefix="xyicon" name="light-mode"></up-icon>

但是有一个问题，官方演示地址，展示的图标，并没有我想要的，怎么办？

这个时候，就需要引用第三方平台的图标库了。

iconfont

iconfont-阿里巴巴矢量图标库，是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

官方地址：https://www.iconfont.cn/

登录账号，可以将自己喜欢的图片收藏到自己的项目中，然后直接打包下载。

打包下载后，会得到以下文件

引用iconfont

将这些文件，复制到uni-app x项目的static/font里面。 font需要手动创建，默认是没有的。

修改App.uvue，将font里面的iconfont.css内容复制的到App.uvue的<style>标签里面。

例如：

<style>
    /*每个页面公共css */
    @font-face {
        font-family: "iconfont";
        src: url('iconfont.eot?t=1576844226174');
        /* IE9 */
        src: url('iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7Edh3LaEI5xY7HYeoWNK7zwLfd/7ZDz8/37f9rny/h3XpE711SdNQq1REh4bhEQoLLJn8v/facvNLUze6duSsZbv+GnTlb7095Zi+lMOtlEU4UA4hIXh39Neujkz1HYC0ju3M1Ac9Uf+ce/0z/PA5qOyXP5orGFznpcFmGBAY2xsawEOyhL0FvEsLiQTuJ7AoFUtsVtbBxckq4BugXjNDYVkbRYlhBOavvMZW7ZjpmrpbfpEfFY/H/8MIktSM+h78XRTJys/2///CaSPuC0jpPm5cJtExh6iEM99PQ8l9NiehMFPZtIVRMNXEj+zb0beXPT/M1lbNI395ZEVieiAZpiR1+KFn1lRTOZnifXTnlARyZg1+Tgxt7EMYgmJIyQ+AMNyCeqKWeO9ZOlV6Y7jtTFeKQ8tRm5qIlYcXy1Oyh9fVuuJ2tZ0WWdWhKmbl3MZu/sBgAGj+GXDAAynUbHQsuY1Dsowei8GE4agxGp8LQRRQbg6AndIDcIVej0Mm8c2vQ46ZEObfY4iStdK1oEgH8wh0cirf1tGHWjmFZSXw4Zt2pNGH1AssUPk+XIpFCyZjCESvUgkNAQRBpB+/CBuCIaSjsmCTRSFWSIXVzWoOeKt6wNErxaK51q3r1fPWtfq7nL7SgSFApHfYIivvEiv0cyEvqZGntCM6OxoqkToIdUN3Gg6mJUAqBFGFjxEg0tgwvcDFDIAM9f+WFS4weC6ob6egYZ6rhYSgSJa29jWNzPQ0s81TiSSNXpHI5jwtbi6eBNqkGrdc99fbMfQL+iYTR2oapkiByLYs93k3fbd5NwOxF9mAwy7HK58wdfBl+66BEADufaQOdvl2CPZJU7RbEv0wAzQL7Oh+dqs2fBRb9OgvjwoANaSyP+OIkUtxdT2/+sOGgpaCg6mGwDnsoN8fi5XyfIDVG5suj4+Wyg4oRIcmX6AAKfWSfHOS/m4NOO8XH5k+R2VQ1y+jbobtzlAYyAzQskq82saBgPMgBl9GDMAjnmOlY4Uj5SOuQGIffIeFR6dJps6HYW4RPbdpn6ypgHJMwmlMmTWBPBKrUlpRVBZrqfp21Wmy+v6P7OwsZ4Iob4vJnZfUlJTK/V9U/VkftSxuvWZbpn658+yjBSnJdacFWDXa2k6qDLvZgWQk8gTocUryiH3Y+6vPMc8KiXuu13obDbdSKNYV79vro61UN9/WHR+JpWlwfQNDrDNB6SVgC5daU02/IT7CSz3kQX4CPo9+Sub/UPsukQZ4Uhctmlu59ts8OXe2ML/Bhfwvfljk8rjW9m+pB/phmgqUQjyp/jKwVrLWy3UnASibDH6qsslHUkYxCB9AIFJP/kYZpZvIjQzJiQ9K5A1a2gh96Aacgad5ioM2rU9ecgUKSHKAHY8EAjjHiEZ9RWycRFayG+oZv1CZzwSMOgyGnMO2QieX5egIOhUnVCuCY8JdsxrxWdghI4irXKVewUy4EHa7/ScyW3wQOYxIBgaA0RGmRQu3SKbgeMI6kthgYYdE9Gf63aZ35k6mnBJ3k0SUCCgo1QTFKcRPEyujvKu958BhpBDIUNKfiSvACnAa6f6Onox0G2NF6tkXRoHhgwDCDHeiZEEF7VFXcDBmED5/q0sQIM6zBQR35wuq8Tiajrl69xpLD0VysKcNVLkKFGj070xuc+9NIZyWPEKRig1moQj4YKXnvKJzUwIAAAA') format('woff2'),
            url('iconfont.woff?t=1576844226174') format('woff'),
            url('iconfont.ttf?t=1576844226174') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('iconfont.svg?t=1576844226174#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-shipin:before {
        content: "\f0024";
    }

    .icon-tupian:before {
        content: "\e650";
    }

    .icon-guanyuwomen:before {
        content: "\e608";
    }

    .icon-ziyuan:before {
        content: "\e60d";
    }
</style>

复制完成之后，还不能直接使用，因为这里面引用的iconfont.eot，iconfont.woff，iconfont.ttf这几个文件，路径还是当前目录。

App.vue是无法应用的，因此还需要手动改一下路径，在前面添加~@/static/font/，表示从项目根目录查找路径static/font

最终<style>标签的完整内容如下：

<style>
    /*每个页面公共css */
    @font-face {
        font-family: "iconfont";
        src: url('~@/static/font/iconfont.eot?t=1576844226174');
        /* IE9 */
        src: url('~@/static/font/iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7Edh3LaEI5xY7HYeoWNK7zwLfd/7ZDz8/37f9rny/h3XpE711SdNQq1REh4bhEQoLLJn8v/facvNLUze6duSsZbv+GnTlb7095Zi+lMOtlEU4UA4hIXh39Neujkz1HYC0ju3M1Ac9Uf+ce/0z/PA5qOyXP5orGFznpcFmGBAY2xsawEOyhL0FvEsLiQTuJ7AoFUtsVtbBxckq4BugXjNDYVkbRYlhBOavvMZW7ZjpmrpbfpEfFY/H/8MIktSM+h78XRTJys/2///CaSPuC0jpPm5cJtExh6iEM99PQ8l9NiehMFPZtIVRMNXEj+zb0beXPT/M1lbNI395ZEVieiAZpiR1+KFn1lRTOZnifXTnlARyZg1+Tgxt7EMYgmJIyQ+AMNyCeqKWeO9ZOlV6Y7jtTFeKQ8tRm5qIlYcXy1Oyh9fVuuJ2tZ0WWdWhKmbl3MZu/sBgAGj+GXDAAynUbHQsuY1Dsowei8GE4agxGp8LQRRQbg6AndIDcIVej0Mm8c2vQ46ZEObfY4iStdK1oEgH8wh0cirf1tGHWjmFZSXw4Zt2pNGH1AssUPk+XIpFCyZjCESvUgkNAQRBpB+/CBuCIaSjsmCTRSFWSIXVzWoOeKt6wNErxaK51q3r1fPWtfq7nL7SgSFApHfYIivvEiv0cyEvqZGntCM6OxoqkToIdUN3Gg6mJUAqBFGFjxEg0tgwvcDFDIAM9f+WFS4weC6ob6egYZ6rhYSgSJa29jWNzPQ0s81TiSSNXpHI5jwtbi6eBNqkGrdc99fbMfQL+iYTR2oapkiByLYs93k3fbd5NwOxF9mAwy7HK58wdfBl+66BEADufaQOdvl2CPZJU7RbEv0wAzQL7Oh+dqs2fBRb9OgvjwoANaSyP+OIkUtxdT2/+sOGgpaCg6mGwDnsoN8fi5XyfIDVG5suj4+Wyg4oRIcmX6AAKfWSfHOS/m4NOO8XH5k+R2VQ1y+jbobtzlAYyAzQskq82saBgPMgBl9GDMAjnmOlY4Uj5SOuQGIffIeFR6dJps6HYW4RPbdpn6ypgHJMwmlMmTWBPBKrUlpRVBZrqfp21Wmy+v6P7OwsZ4Iob4vJnZfUlJTK/V9U/VkftSxuvWZbpn658+yjBSnJdacFWDXa2k6qDLvZgWQk8gTocUryiH3Y+6vPMc8KiXuu13obDbdSKNYV79vro61UN9/WHR+JpWlwfQNDrDNB6SVgC5daU02/IT7CSz3kQX4CPo9+Sub/UPsukQZ4Uhctmlu59ts8OXe2ML/Bhfwvfljk8rjW9m+pB/phmgqUQjyp/jKwVrLWy3UnASibDH6qsslHUkYxCB9AIFJP/kYZpZvIjQzJiQ9K5A1a2gh96Aacgad5ioM2rU9ecgUKSHKAHY8EAjjHiEZ9RWycRFayG+oZv1CZzwSMOgyGnMO2QieX5egIOhUnVCuCY8JdsxrxWdghI4irXKVewUy4EHa7/ScyW3wQOYxIBgaA0RGmRQu3SKbgeMI6kthgYYdE9Gf63aZ35k6mnBJ3k0SUCCgo1QTFKcRPEyujvKu958BhpBDIUNKfiSvACnAa6f6Onox0G2NF6tkXRoHhgwDCDHeiZEEF7VFXcDBmED5/q0sQIM6zBQR35wuq8Tiajrl69xpLD0VysKcNVLkKFGj070xuc+9NIZyWPEKRig1moQj4YKXnvKJzUwIAAAA') format('woff2'),
            url('~@/static/font/iconfont.woff?t=1576844226174') format('woff'),
            url('~@/static/font/iconfont.ttf?t=1576844226174') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('~@/static/font/iconfont.svg?t=1576844226174#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-shipin:before {
        content: "\f0024";
    }

    .icon-tupian:before {
        content: "\e650";
    }

    .icon-guanyuwomen:before {
        content: "\e608";
    }

    .icon-ziyuan:before {
        content: "\e60d";
    }
</style>

三、使用iconfont图标

上一篇文章，实现了Swiper 轮播图，在下面再实现几个图标，目标效果如下：

主要有4个图标，修改index.uvue，新增一个view，代码如下：

<template>
    <view class="home">
        <!-- 轮播区域 -->
        <up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper>
        <!-- 导航区域 -->
        <view class="nav">
            <view class="nav_item">
                <view class="iconfont icon-ziyuan"></view>
                <text>网上超市</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-guanyuwomen"></view>
                <text>联系我们</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-tupian"></view>
                <text>社区图片</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-shipin"></view>
                <text>直播中心</text>
            </view>
        </view>
    </view>
</template>

编译运行，效果如下：

可以看到，并没有一行展示。

接下来，增加css样式，使用flex布局，一行展示。

完整代码如下：

<template>
    <view class="home">
        <!-- 轮播区域 -->
        <up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper>
        <!-- 导航区域 -->
        <view class="nav">
            <view class="nav_item">
                <view class="iconfont icon-ziyuan"></view>
                <text>网上超市</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-guanyuwomen"></view>
                <text>联系我们</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-tupian"></view>
                <text>社区图片</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-shipin"></view>
                <text>直播中心</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                swiper: [{
                    id: 1,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=1'
                }, {
                    id: 2,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=2'
                }, {
                    id: 3,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=3'
                },
                {
                    id: 4,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=4'
                }
                ],
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .home {
        swiper {
            width: 750rpx;
            height: 380rpx;

            image: {
                height: 100%;
                width: 100%;
            }
        }

        .nav {
            display: flex;
            flex-direction: row; //横向排列
            justify-content: space-around; //平均分布在一行

            .nav_item {
                text-align: center;

                view {
                    width: 120rpx;
                    height: 120rpx;
                    background: $shop-color;
                    border-radius: 60rpx;
                    margin: 10px auto;
                    line-height: 120rpx;
                    color: white;
                    font-size: 50rpx;
                    text-align: center;
                }

                .icon-tupian {
                    font-size: 45rpx;
                }

                text {
                    font-size: 30rpx;
                }
            }
        }
    }
</style>

这里有一个变量$shop-color，是在uni.scss里面定义的，用来统一风格

/* 颜色变量 */
$shop-color: #fe9b95;

最后重新编译项目，效果如下：