在 uniapp 中使用阿里图标

文章目录

前言
寻找需要的图标
- 下载至本地
页面中使用
- 创建本地css文件
- app.vue中引入
- 页面使用
导航栏里使用
小结

前言

在使用 uniapp 开发项目的过程中，图标的使用可以说是日常操作，甚至百分之八十的页面都会用到，而如果使用了 ui 框架的话，框架里面本身也会自带图标，不过这些图标很难满足需求，以下则是阿里图标的使用。

寻找需要的图标

将需要用的图标加入购物车或者收藏起来
点击右上角的购物车图标，将已经选择的图标添加至项目
这里需要登录，大家可以自行百度

下载至本地

下载到本地后

可以点击 demo_index.html 查看，里面有使用方法。

页面中使用

将已经下载好的文件里全部拷贝到项目里，推荐放到文件夹 static/iconfont 下，大家可以全部拷贝，也可以只拷贝 iconfont.css 和 iconfont.ttf 两个文件。

创建本地css文件

在 common/css 文件下创建 font-icon.css 文件，这是为了配置和引用阿里的图标，代码如下：
把iconfont.css里的内容复制到此文件内，复制 .iconfont 下面的样式即可，上面的引入不用复制。
可能有部分小伙伴搜索到的需要加 https ，但是现在官方已经做处理，所以不用，如果不能访问大家最后再加。

@font-face {font-family: uniicons;font-weight: normal;font-style: normal;src:url('~@/static/iconfont/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;
}// 下面的内容，把iconfont.css里的内容复制过来，复制 .iconfont 下面的样式即可。

app.vue中引入

页面使用

demo_index.html 里有相对应的图标使用
页面中使用把 demo_index.html 里的 class iconfont 换成 icon 即可，因为你在 font-icon.css 里定义叫这个，为了区分大家也可以一样或者自定义名称。

<span class="icon"></span>
<span class="icon icon-xxx"></span>

导航栏里使用

将图标选好，下载到本地不用创建css文件来引入，直接使用即可。
导航栏的使用也是一样的，跟随 uniapp 官网的来即可。
只不过网上部分也是说加在引入的地方 https，那应该是以前的版本了，现在不用了，按照正常的步骤调试使用，最后不能用了，再去尝试加 https 的办法。
代码里 text 的值，在 demo_index.html 里都能找到，把前面的符号换成 \u 即可，切记后面没有分号

"app-plus": {"titleNView": {"buttons": [{"text": "\ue600","fontSrc": "/static/iconfont/iconfont.ttf","float": "right","key": 1},{"text": "\ue648","fontSrc": "/static/iconfont/iconfont.ttf","float": "right","key": 2}]}
}

小结

虽然文章比较长，没有其它的这么简洁，不过使用流程就是这样，如此也方便大家自定义各类图标
使用方法呢，其实官网都是有的，大家注意还是根据官方的来进行开发
本文就是做个引导和梳理，办法有很多，大家觉得适用即可

在 uniapp 中使用阿里图标相关推荐

uniapp中引入阿里图标
一.在uniapp中发现,以往H5的阿里使用步骤失效了: 1.把图标加入购物车,在购物车里添加至项目,选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfo ...
在 uni-app 中使用字体图标
在 uni-app 中使用字体图标下载iconfont字体图标进入 iconfont 官网本地下载图标文件压缩包解压出来在uni-app 项目static 下新建 fonts 文件夹 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
uniapp项目中使用阿里图标
一.uniapp引入阿里图标 1.第一步:选择想要的图标加入购物车注意:批量注入的方法(按F12 在console里面输入下方的代码) var span = document.querySelect ...
uniapp中使用iconfont 图标库
我们要是想使用图标的话,快速的应用到我们的项目中 1.阿里矢量图标库作为一个前端开发人员还是要了解的今天就说一下怎么快速应用到我的uni-app项目中第一步选择图标点击我的项目没有 ...
如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）
前言提示:本篇文章正文内容分为: 给uniapp项目导航栏添加字体图标: 在uniapp项目中使用字体图标. 一.给uniapp项目导航栏添加字体图标 1:登录阿里巴巴矢量图标库:https://w ...
uni-app中使用自定义图标库
方法一: 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中 3.修改iconon ...
【小程序】小程序中使用阿里图标库
文章目录 1.学会在阿里图标库中图标添加进项目 2.引用图标库资源 1.学会在阿里图标库中图标添加进项目相关文章 2.引用图标库资源 1.复制代码,浏览器搜索 2.搜素后复制代码,新建一个.wxss ...