方法一:使用在线链接

  1. 登录/注册账号

  1. 选择看上的图标,鼠标悬浮,点击购物车

  2. 点击导航栏上购物车图标,查看购物车

  1. 将购物车中的图标添加至项目,若无项目,则新建项目

    1. 在项目库中看到自己的图标,选择 font class 方式,并点击“查看在线连接”,然后点击生成代码
  2. 点击复制代码,会得到 //at.alicdn.com/t/font_2933398_9eu14vuyrsu.css,在html中加上https:使用

  3. 在html中使用link的方式

  4. 鼠标悬浮图标上,复制代码,得到该图标的类名 icon-bumengaikuang 在标签上再加上类名 iconfont 使用。一般用 i 标签、span标签都行。

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2933398_6teph59hevw.css">
<i class="iconfont icon-bumengaikuang"></i>
  1. 若要对样式进行修改,则在css中直接对 图标类名icon-bumengaikuang进行修改即可。
  2. 当项目中的图标增多时,使用最新生成的链接。

方法二:下载图标

  1. 悬浮在看上的图标,选第三个,下载。

  1. 选择合适的颜色,合适的大小。大小单位是px,同字体设置。

  1. 选择合适的格式下载。

    1. 选择复制svg代码时,直接粘贴到html目标位置即可。
    2. 选择图标格式时,按照引入图片的方式引入html即可。

阿里矢量库的图标使用教程(在线,下载)相关推荐

  1. vue Elementui 引入第三方icon(阿里矢量库)

    在做项目的过程中,发现elementui图标比较少,根据ui好多图标都没有,被迫只能通过引入第三方图标啦,自己通过参考其他教程,整理一下过程呀 首先呢 需要去阿里矢量图库注册账号呀 接下来,需要新建项 ...

  2. 微信小程序使用iconfont阿里矢量多色图标

    引用 使用方法: 引用方法名 支持多色 兼容性 unicode ❌ 好 font-class ❌ 良好 symbol ✔ 差 虽然unicode和font-class很好,但你会发现都不支持多色模式, ...

  3. ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法

    第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...

  4. 小程序--微信小程序使用阿里巴巴矢量库图标

    小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日 阿里巴巴矢量库 1.导图 1.1下载图标项目 注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...

  5. Vue3.0及以上版本的项目添加svg图片及使用阿里矢量图片库

    一.安装插件 npm install svg-sprite-loader --save-dev 二:配置,在Vue.config.js加入处理 svg 的 loader //3.0版本chainWeb ...

  6. uniapp 使用 官方CSS 和 引入 Iconf阿里巴巴矢量库的Css

    其实就是偷来用一下 在Hbuider中新建 He.lloWorld 的模板 把它里面的 uni.css 偷来 然后我们呢在 自己项目的 App.vue 换上去,然后我们就报错了 此时 我们看错误说找不 ...

  7. uniapp 引入阿里矢量图标库的详细步骤及踩坑经历

    uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...

  8. 阿里巴巴矢量图标库icon图标在线引用

    阿里巴巴矢量图标库icon图标在线引用 写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内 具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...

  9. vue框架项目中使用阿里矢量图标库

    vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...

  10. 【sciter】:sciter 使用阿里矢量图标库

    sciter 使用阿里矢量图标库 步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存 步骤三:点击 Font cla ...

最新文章

  1. grafana安装升级部署
  2. Intel MKL 稀疏矩阵求解PARDISO 函数
  3. Linux下不同颜色文件的类型
  4. Google Chrome 浏览器离线安装包下载方法
  5. 厦门大学林子雨老师大数据实验环境搭建索引
  6. linux查看内存使用情况top详解
  7. 页面加载缓冲的login
  8. cortana在哪里打开_Windows 10开启Cortana的方法步骤
  9. 韩版机泛泰A850framework去除漫游、本地化
  10. mac最方便的文件管理器--Qspace
  11. 简历:精通 熟练 熟悉 了解
  12. 武僧一龙狂殴韩国拳王 用中国功夫醉拳轻松赢战
  13. Kubernetes kubectl命令补全功能
  14. r调用python任何模块_RStudio不通过rPython加载所有Python模块
  15. matlab中单独存图_matlab 保存图片的几种方式
  16. CSS实现水平居中的六种方法
  17. 漫画 | 最让程序员抓狂的7件事
  18. influxdb常见操作
  19. message:Error: 系统错误,错误码:80051,source size 3962KB exceed max limit 2MB [20220819 14:42:38][wx21e41af1
  20. 悟透javscript

热门文章

  1. linux proftpd 用户,[原]把boblog博客的用户导入proftpd用户认证数据库
  2. 第六章jQuery选择器
  3. Webpack5构建微前端和Web应用程序2022教程
  4. 自制Json解析工具(易语言)
  5. 2019年10月江苏计算机二级C语言编程题解析
  6. cad迷你看图免费版|cad迷你看图电脑版免费版下载 v2019R8
  7. jedate change事件监控,使用jedate无法使用change事件
  8. 教你webm格式怎么转换成mp4
  9. wps计算机打印双面输出,如何在电脑wps软件内设置双面打印
  10. 高通modem启动过程_使用QXDM收集高通modem日志