uniapp引入阿里巴巴矢量图标库

uni-app中使用阿里巴巴矢量图标库

1、打开网址，链接：阿里巴巴矢量图标库

2、注册账号并登录，已有账号直接登录

3、选择图标，点击添加入库

4、点击购物车图标，查看添加入库的图标

5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。

6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。

注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。

7、下载代码至本地

8、找到下载的压缩包，解压缩后复制 iconfont.css 文件到uniapp项目的common文件夹中（若没有该文件夹，可以新建一个）

9、去到项目中复制代码，然后打开iconfont.css文件，替换@font-face中的内容。并且在//at前加上https:。

替换前iconfont.css内容：

@font-face {font-family: "iconfont"; /* Project id 2555092 */src: url('iconfont.woff2?t=1621316808304') format('woff2'),url('iconfont.woff?t=1621316808304') format('woff'),url('iconfont.ttf?t=1621316808304') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-fanchuan:before {content: "\e603";
}.icon-daohang:before {content: "\e602";
}

替换后iconfont.css内容：

@font-face {font-family: 'iconfont';  /* Project id 2555092 */src: url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff2?t=1621316773774') format('woff2'),url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff?t=1621316773774') format('woff'),url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.ttf?t=1621316773774') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-fanchuan:before {content: "\e603";
}.icon-daohang:before {content: "\e602";
}

10、iconfont.css中添加以下内容（目的：使得图标可以被应用于text、view、button等组件）

text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {font-family: "iconfont";font-size: inherit;font-style: normal;
}

11、项目中引用，可全局引用（App.vue的style标签中引用）、局部引用（在具体的.vue文件中的style标签中引用）。推荐：全局引用方式 。

12、页面中使用图标(第15行)

flex3_zonghe.vue

<!-- 综合练习：回顾Flex流式布局的基础语法以及CSS编写规范-->
<template><view class="container"><view class="swipper"><image src="../../static/hongzao.jpg" mode="aspectFill"></image></view><view class="title"><view class="tl"><button>出售</button><text>新疆大枣</text><!-- <text class="xingxing icon-xing"></text> --><text class="xingxing icon-fanchuan"></text></view><view class="des">高端品质，无敌质量!</view></view><view class="detail"><view class="danjia"><text>预售单价:</text><text>1.99元/公斤</text></view><view class="chanliang"><text>预计总产量:</text><text>500/公斤</text></view><view class="address"><text>地址:</text><text>江苏省苏州市吴中区</text></view></view><view class="share"><text class="icon-fenxiang1">分享</text><text class="icon-haibaofenxiang">立即分享</text><text class="icon-haibaofenxiang">生成海报</text></view><view class="footer"><view class="left"><text>受关注:</text><text>200次</text></view><view class="right"><text class="icon-sixin1">私信他</text><text class="icon-sixin">联系他</text></view></view></view>
</template><script></script><style lang="less" scoped>@margin: 5px;@width: 50%;.container {display: flex;flex-direction: column;margin: 10px;font-size: 18px;color: #333;.swipper {text-align: center;image {width: 100%;}}.title {.tl {display: flex;text-align: left;button {margin: 5px;font-size: 12px;color: #fff;border-radius: 15px;background-color: #18B566;}text {margin-top: 5px;font-weight: 700;}.xingxing {position: absolute;right: 20px;}}.des {margin-left: @margin;}}.detail {display: flex;flex-flow: row wrap;justify-content: space-between;margin: @margin;.danjia {// flex: 0 0 50%;width: @width;//这一行代码的作用与上一行相同margin: @margin 0;text:nth-child(2) {color: #f00;}}.chanliang {width: @width;margin: @margin 0;}.address {margin: @margin 0;}}.share {display: flex;flex-flow: row wrap;justify-content: space-around;color: #7CC8B5;height: 50px;line-height: 50px;background-color: #E6FBF4;}.footer {display: flex;flex-flow: row wrap;justify-content: space-between;margin-top: 60px;padding: 0 10px;color: #fff;height: 50px;line-height: 50px;background-color: #1FC094;.right {text:nth-child(1) {padding-right: 10px;border-right: 2px solid #89E4CF;}text:nth-child(2) {padding-left: 10px;}}}}</style>

示例图：

uniapp引入阿里巴巴矢量图标库相关推荐

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
uni-app使用阿里巴巴矢量图标库
uni-app使用iconfont中的图标 1.打开网址链接: 阿里巴巴矢量图标库. 2.登录自己的账号 3.点击响应的类型然后点击收藏 4.点击项目 5.点击下载到本地 6.解压下载下来的压缩文件 ...
umi框架：react优雅引入阿里巴巴矢量图标库
进入阿里巴巴矢量图标库,将选入的图标放入购物车. 选择添加至项目,没有项目可新建项目. 封装一个自定义Icon组件,这里推荐React使用函数形式: import React from 'react' ...
vue2引入阿里巴巴矢量图标库字体
1.去阿里巴巴矢量图标库官网下载需要的图标 iconfont-阿里巴巴矢量图标库 2.在vue目录下src/assets创建font文件夹,粘贴所下载的字体文件(例如:我的字体文件是:TsangerY ...
如何在线引入阿里巴巴矢量图标库？
本地下载了图标矢量库后,发现漏下了几个图标怎么办? 1.重新下载新的项目,覆盖本地的. 2.引入在线链接! 如何引入在线链接? 1.选择你要下载的图标,先下载到本地. 2 复制新图标内容 3.粘贴到本 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...

uniapp引入阿里巴巴矢量图标库

uniapp引入阿里巴巴矢量图标库相关推荐

最新文章

热门文章