uni-app.08.自定义扩展图标

港控/mmm° 2023-01-20 10:55 194阅读 0赞

### uni-app自定义扩展图标 ###

*   *  前言
     *  自定义扩展图标
     *   *  1.阿里矢量图标库
         *  2.搜索图标
         *  3.添加至项目
         *  4.下载至本地
         *  5.解压重命名
         *  6.项目中引入
         *   *  1).将adminIconfont拷贝至static目录
             *  2).css中引入字体
             *  3).app.vue中配置字体
         *  7.项目中使用
         *  8.运行项目

## 前言 ##

我们使用的任何框架所提供的图标或者字体都有不满足自己使用的时候，这个时候就需要我们掌握自定扩展图标了。

我之前说了我是个`纯后端(不要嫌我啰嗦，我只想强调对于前端我就是个菜鸟)`，前端的东西对于别人来说很容易，但是对我来讲就不一样了。我今天也搜了如何在uni-app中如何自定义扩展图标，另我惊讶的是其中有个大佬，CSDN排名前两百名，认证的博客专家，他写的一篇如何自定义扩展图标的文章竟然还要收费o(╥﹏╥)o。这也是为什么我要写这篇文章的目的，或许我写的没有大佬的好，但是一定是能用的，希望需要的小伙伴能不走弯路不花冤枉钱！！！

## 自定义扩展图标 ##

### 1.阿里矢量图标库 ###

首先我们打开[阿里巴巴矢量图标库][Link 1]，这个网站是需要登录的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]

### 2.搜索图标 ###

我们在上方的搜索栏输入我们想要找的图标，比如`设置`，在搜索出来的结果中筛选出你想要的图标，然后选择**添加入库**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]

### 3.添加至项目 ###

上一步点击了**添加入库**之后，点击右上方的购物车图标，点击**添加至项目**，没有项目的话就点击红框处新增一个项目，最后点击确定即可

![在这里插入图片描述][20210512180253932.png]

### 4.下载至本地 ###

上一步添加至项目点击确定或会跳转到我们的项目页面，下面是我今天添加的图标，点击**下载至本地**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]

### 5.解压重命名 ###

解压上一下载的压缩包，将压缩包中的字体文件`iconfont.ttf`重新命名为`adminIconfont.ttf`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 3]

### 6.项目中引入 ###

#### 1).将adminIconfont拷贝至static目录 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]

#### 2).css中引入字体 ####

之前我也说了，我使用的是uniapp搭配[graceUI][]来做的，graceUI的字体文件配置在了`graceUI.css`中，为了方便以后的迭代升级，我拷贝了graceUI.css重命名为admin\_graceUI.css，然后在`app.vue`中配置的是我们拷贝后的css文件

所以我们自定义的扩展图片应该配置在`admin_graceUI.css`中

/* 自定义扩展图标 */
    /* #ifndef APP-NVUE */
    	/* #ifndef MP-BAIDU */
    	@font-face{ 
    		font-family : "admin-iconfont";
    		font-weight : normal;
    		font-style  : normal; 
    		src         : url('@/static/adminIconfont.ttf') format('truetype');
    	}
    	/* #endif */
    .admin-icons{ font-family:"admin-iconfont"; font-style:normal;}
    /* #endif */

#### 3).app.vue中配置字体 ####

这一步主要是配置在vue和nvue中使用自定义扩展图标，至于上面代码中提到的在百度小程序中的配置我们不做，因为我们是确定不做百度小程序的

### 7.项目中使用 ###

通过上面在`app.vue`中的配置，可以看到我们为自定义图标起的名字为`admin-icons`，在页面中我们不要写错了

<view class="gui-accordion gui-border-b">
      
      <view class="gui-accordion-title gui-flex gui-rows gui-nowrap gui-align-items-center" @tap="changeTo(0)">
        <text class="gui-accordion-icon gui-block-text admin-icons gui-primary-color"></text>
        <text class="gui-accordion-title-text gui-block-text gui-h6 gui-primary-color">系统管理</text>
        <text class="gui-accordion-icon gui-block-text gui-icons gui-color-gray gui-text-right" v-if="currentIndex != 0"></text>
        <text class="gui-accordion-icon gui-block-text gui-icons gui-color-gray gui-text-right" v-else></text>
      </view>
      
      <view class="gui-accordion-content gui-fade-in gui-img-in" v-if="currentIndex == 0">
        <image src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/17.png" style="width:690rpx; height:380rpx;"></image>
      </view>
    </view>

上面代码中的``要与我们在阿里巴巴矢量图标库中添加到项目中的图标代码一致，否则引用失败

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 5]

### 8.运行项目 ###

运行项目，通过下图可以看到我们的图标全部引用成功了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 6]

[Link 1]: https://www.iconfont.cn/home/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]: /images/20221021/bcee68f4499549abb2accde4416e61d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]: /images/20221021/6f90ee90d4d84cfa86a86f2e44b3796a.png
[20210512180253932.png]: /images/20221021/9d3467a015304f0faef302069dfbf1be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]: /images/20221021/465c5ebfb20f412b9bdb22bad087e187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 3]: /images/20221021/2ca8e879de9b46a88d59c79d38f250f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]: /images/20221021/9e0681a32fdd40e1a6f1ff7a0f371618.png
[graceUI]: https://www.graceui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 5]: /images/20221021/915149e6853a4772a8dc93ec9735dc7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 6]: /images/20221021/b697bc5b946c4f61a981c74a3c79ac41.png