uniapp使用阿里icon详细步骤

探索未知zxx

已于 2022-06-15 18:12:54 修改

阅读量4.3k

点赞数

分类专栏： uniapp-icon 文章标签： css

于 2022-03-30 14:31:02 首次发布

本文链接：https://blog.csdn.net/qq_33444716/article/details/123844921

版权

uniapp-icon 专栏收录该内容

1 篇文章

订阅专栏

 1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 
 2. 找到对应的icon项目，点击下载至本地

在这里插入图片描述

3.将红框框起来的文件放到项目中

(下载后解压的icon文件)

项目中要放的地方

 4. 创建一个font-icon，做以下处理

@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src:url('~@/static/font/iconfont.ttf') format('truetype'); 
}

.icon {
  color: #999;
  font-family: uniicons;
  font-size: 42upx;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

.icon.uni-active {
  color: #ff3939;
}

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

/* 以下为要替换的icon名称，在下载的压缩文件里面的ionfon.css里面复制到下面*/
.icon-shenhe1:before {
  content: "\e600";
}

.icon-shezhi:before {
  content: "\e61b";
}

5. 在uniapp的app.vue文件的style中引入并且使用

@import "@/common/css/font-icon.css"; // global `在这里插入代码片`css

//页面中使用
<view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>