阿里巴巴圖標庫

添加圖標、下載、引入的使用方法：

1、添加圖標

2、下載到字體圖標文件后，復制圈中的兩個文件到static目錄下：

3、新建一個自定義字體圖標樣式文件： font-icon.css

4、給font-icon.css添加內容

5、font-icon.css具體代碼：

@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: #1ca6ec;
}


// 下面的樣式直接復制
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanhuishouye:before {
  content: "e631";
}

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

.icon-shouye:before {
  content: "e63f";
}

.icon-fanhuishouye:before {
  content: "e640";
}

.icon-wode:before {
  content: "e641";
}

.icon-guanli:before {
  content: "e642";
}

6、頁面寫入字體圖標

<view class="icon icon-showye"></view>

總結

以上是生活随笔為你收集整理的在uni-app中使用阿里巴巴图标库字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。