uniapp使用阿里icon详细步骤
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车,并且点击购物车,添加到相应的项目2. 找到对应的icon项目,点击下载至本地3.将红框框起来的文件放到项目中4. 创建一个iconfont.css,做以下处理@font-face {font-family: uniicons;font-weight: normal;font-style: normal;src:url('~@/st
·
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车,并且点击购物车,添加到相应的项目
2. 找到对应的icon项目,点击下载至本地
3.将红框框起来的文件放到项目中
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>
更多推荐
所有评论(0)