Ali Baba icon library using the Fonts icon in the uni-app

Ali Baba icon library 

Add icons, download, introduction of use:

1, add icons

 

 

 

 

 

 

 

 

 

 

 

2, after downloading the font icon file, copy the circle two files to the static directory:

       

3, create a custom font icon style file: font-icon.css

 

 

 

 

 

 

 

4, add content to the font-icon.css

 

 

 

 

 

 5, font-icon.css specific code:

@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, page write font icon

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