uniapp使用阿里图标库

uni-icons 已经收录了日常开发中常用的图标，但是因为体积问题，不可能一直无限添加新图标，所以uni-icons 也提供了扩展的方法。

使用 custom-prefix 和 type 属性自定义图标

<uni-icons custom-prefix="custom-icon" type="icon-youxi" size="30"></uni-icons>

#获取图标

以下所有说明都是基于阿里图标库 (opens new window)进行扩展，其他图标库同理，明白原理即可方便扩展

访问阿里图标库 (opens new window)，搜索图标并加入购物车：
点击页面右上角购物车图标，点击添加至项目，如没有项目，需要点击下图第二步的图标添加一个项目目录，如已经有项目则可以略过第二步，选择项目后点击确定：

确定后进入项目，点击项目设置，对图标库进行一些设置：
项目名称和项目描述根据自己需求填写， fontClass 是图标的前缀，需要传入组件type属性，fontFamily 是图标集名称，需要传入组件custom-prefix 属性，字体格式可以只勾选 ttf:
点击保存后，可以下载图库库到本地：
下载解压后，需要用到的文件暂时有两个 iconfont.css、iconfont.ttf:
将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。

打开 iconfont.css ,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确：

@font-face {font-family: "iconfont"; src: url('/static/iconfont.ttf') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;
}.icon-search:before {content: "\e65c";
}

通过上述操作，现在就获得一个可以自定义的图标库，

#在 vue 页面使用自定义图标

在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面

<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>

使用 custom-prefix 和 type 属性自定义图标

<uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>

注意：因为本质上还是使用的字体，所以多色图标还是不支持的。

uniapp使用阿里图标库相关推荐

uniapp使用阿里图标库iconfont
1.在阿里图标库中找到自己要使用的图标并加入项目: iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴 ...
uniapp小程序使用symbol格式图标（阿里图标库）
参考这个博主小程序的写法https://blog.csdn.net/qq_42001842/article/details/103959394, 总结uniapp的写法如下,做个记录: 一.安装min ...
uni-app引用外部图标库（阿里矢量图）
uni-app引用外部图标库(阿里矢量图) 作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标第一步,在项目目录中新建文 ...
uniapp引入阿里图标
uniapp引入阿里图标: uniapp引入自定义阿里图标库后在手机端不显示图标跟着我做: 第一步: 第二步: 第三步: 是的,你没看错,这样操作不太行,确实没有图标s #学习时间(正确): 第一步 ...
uni-app接入阿里图标使用以及图标旋转
uni-app接入阿里图标使用以及图标旋转阿里图标官网创建账号及项目阿里矢量图标库将需要的图标添加到购物车,添加到自己的项目点击"Download Code"下载项目代码 ...
uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法简单方便阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
下载并使用阿里图标库
一. 下载图标库打开阿里图标库网址 https://www.iconfont.cn/,选择自己喜欢的图标,加入购物车(需要进行登录). 点开购物车图标,点击下载代码. 二.使用阿里图标库解压下载的 ...
scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
antd 阿里图标库扩展a-icon 图标
vue 项目中使用阿里图标库扩展antd 组件 icon 的图标第一步:创建图标库在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...

uniapp使用阿里图标库

#获取图标

#在 vue 页面使用自定义图标

uniapp使用阿里图标库相关推荐

最新文章

热门文章