uniapp使用阿里icon详细步骤

 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>

uniapp使用阿里icon详细步骤相关推荐

uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法简单方便阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
uni-app运行到iPhone详细步骤说明（windows）
准备工作:在自己的电脑上安装iTunes,windows下载地址(苹果官网下载不了):https://pc.qq.com/search.html#!keyword=itunes.另外可以参考官方提供的 ...
uniApp打包安卓应用详细步骤
一.打包安卓应用 1.使用uniApp新建的一个混合运用 2.点击发行-原生App打包-打包Android(apk包) 3.这里我们可以使用公共的一个测试证书或者使用自有的一个证书,楼主在这里就讲一下 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
阿里云免费ssh证书的免费购买，创建、下载，部署证书详细步骤
阿里云免费ssh证书的免费购买,创建.下载.部署证书详细步骤 1.登陆阿里云账号在自己域名对应的阿里云账号申请免费的ssh证书,注意:假定你有好几个阿里云账号,一定在自己的域名对应的阿里云账号申请: ...
阿里云OSS上传文件详细步骤
阿里云OSS删除文件详细步骤一.阿里云oss服务开通点击开通二.进入控制台点击进入三.创建Bucket 点击进入Bucket 四.创建AccessKey 云账号 AccessKey 是您访问 ...
阿里百川V6安全图，uniapp使用阿里百川SDK V6安全图唤醒淘宝APP 阿里百川新版本打开淘宝领券页面/渠道备案,uniapp对接淘宝联盟等等超级详细
阿里百川V6安全图,uniapp使用阿里百川SDK V6安全图唤醒淘宝APP 阿里百川新版本打开淘宝领券页面/渠道备案,uniapp对接淘宝联盟等等超级详细此文章是针对插件市场1.6版本升级的介绍 ...
阿里大鱼进行发短信业务---使用详细步骤-Java操作
文章目录前言一.开通短信服务二.快速学习三.签名管理 1. 何为签名 2. 添加签名四.模板管理 1. 何为模板 2. 添加模板五.Java中使用阿里大鱼 1. 开发文档 2. 用到的依赖 ...
unity导出工程导入到iOS原生工程中详细步骤
一直想抽空整理一下unity原生工程导入iOS原生工程中的详细步骤.做iOS+vuforia+unity开发这么长时间了.从最初的小小白到现在的小白.中间趟过了好多的坑.也有一些的小小收货.做一个喜欢 ...
Kubernetes集群的部署方式及详细步骤
一.部署环境架构以及方式第一种部署方式 1.针对于 master 节点将 API Server.etcd.controller-manager.schedule各组件进行 yum install. ...

uniapp使用阿里icon详细步骤

uniapp使用阿里icon详细步骤相关推荐

最新文章

热门文章