前端使用阿里巴巴矢量图库的图标大全

前端如何使用阿里巴巴矢量图库的图标

1.首先搜索想要的图标

阿里巴巴矢量图库http://www.iconfont.cn,可以github登录或者微博登录

2.添加购物车

3.添加至项目

没有项目可以新建一个项目，添加到项目的好处是可以让你一次性下载多个你看中的图标。

4.下载至本地

点击资源管理下面的我的项目，再将选中的图标一次性下载到本地

5.引用图标

查看下载后的解压的文件

浏览器查看demo_index.html,引用阿里巴巴图标，有三种方式

5.1 unicode引用方式

<!--* @Descripttion: 首页* @version: 1.0.0* @Author: fengyang* @Date: 2021-07-21 16:50:43* @LastEditors: fengyang* @LastEditTime: 2021-07-21 20:10:51
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: "iconfont";src: url('./fonts/iconfont.woff2') format('woff2'),url('./fonts/iconfont.woff') format('woff'),url('./fonts/iconfont.ttf') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style>
</head>
<body>
<!--1.引入unicde，font-face用法@font-face {font-family: 'XXX'; // 定义字体的名称src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式}2.font-class 引用font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。与 Unicode 使用方式相比，具有如下特点：相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。3.Symbol 引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。兼容性较差，支持 IE9+，及现代浏览器。浏览器渲染 SVG 的性能一般，还不如 png。--><span class="iconfont"></span><span class="iconfont"></span>
</body>
</html>

5.2 font-class引用方式

<!--* @Descripttion: 首页* @version: 1.0.0* @Author: fengyang* @Date: 2021-07-21 16:50:43* @LastEditors: fengyang* @LastEditTime: 2021-07-21 20:10:13
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: "iconfont";src: url('./fonts/iconfont.woff2') format('woff2'),url('./fonts/iconfont.woff') format('woff'),url('./fonts/iconfont.ttf') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 2.font-class  Unicode 使用方式的一种变种*/.icon-yonghu:before {content: "\e66b";}.icon-zhaopinguanli:before {content: "\e608";}</style>
</head>
<body><!--1.引入unicde，font-face用法@font-face {font-family: 'XXX'; // 定义字体的名称src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式}2.font-class 引用font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。与 Unicode 使用方式相比，具有如下特点：相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。3.Symbol 引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。兼容性较差，支持 IE9+，及现代浏览器。浏览器渲染 SVG 的性能一般，还不如 png。--><span class="iconfont icon-yonghu"></span><span class="iconfont icon-zhaopinguanli"></span>
</body>
</html>

5.3 Symbol引用方式


<!--* @Descripttion: 首页* @version: 1.0.0* @Author: fengyang* @Date: 2021-07-21 16:50:43* @LastEditors: fengyang* @LastEditTime: 2021-07-21 20:14:45
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head>
<body><!--1.引入unicde，font-face用法@font-face {font-family: 'XXX'; // 定义字体的名称src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式}2.font-class 引用font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。与 Unicode 使用方式相比，具有如下特点：相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。3.Symbol 引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。兼容性较差，支持 IE9+，及现代浏览器。浏览器渲染 SVG 的性能一般，还不如 png。--><script src="./fonts/iconfont.js"></script><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yonghu"></use>
</svg>
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhaopinguanli"></use>
</svg>
</body>
</html>

前端使用阿里巴巴矢量图库的图标大全相关推荐

前端如何使用阿里巴巴矢量图库的图标
实现网页中的小图标首先搜索想要的图标阿里巴巴矢量图库http://www.iconfont.cn ,可以微博登录添加购物车添加至项目下载至本地 unicode引用你需要把刚刚下载的压缩包打 ...
前端 - 如何引入阿里巴巴矢量图库？
1.进入阿里巴巴矢量图库官网:iconfont-阿里巴巴矢量图标库 2.登录账号 3.查找所需图标,添加至购物车 4.添加至项目 5.下载至本地 6.引入至main.js 7.在组件中调用
8个免费的高质量UI图标大全网站
UI图标素材是设计师必不可少的设计元素. 高质量的UI图标会让设计师的设计效率事半功倍. 本文分享8个免费的高质量UI图标大全网站. 即时设计资源社区即时设计资源广场中精选了多款专业免费的UI图标设 ...
前端开发icon高清图标搜索、下载网站
不管你是前端开发者,还是工作白领,亦或是在校大学生,在日常工作或者学习过程中都可能需要使用图标(icon).今天分享 3 个最常用.最方便的矢量图标下载网站,提供高清.大量的矢量图标. 1.Iconf ...
前端工程师必备的实用网站大全：配色、插件、框架等七大类
一.配色类网站: Color Hunt:http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了.使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的 ...
触摸手势图标大全：48款触摸手势图标免费下载
使用手势图标是一个通过你的应用程序来指导你的用户的明智的办法.在一套优秀的手势图标的帮助下,你可以为你的应用程序轻松设计出一个专业的导游功能.然而,互联网上的很难寻找到高质量的手势图标集合. 这里分享 ...
FontAwesome图标大全
FontAwesome图标大全 FontAwesome图标大全 FontAwesome 4.7.0 图标大全,共计675个图标,以及其在图标字体中的Unicode编码cheatsheet列表,非常方便 ...
前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
阿里巴巴引入字体图标的第二种方法：
阿里巴巴引入字体图标的第二种方法: 第一步:拷贝项目下面生成的fontclass代码: 首先将所选购的图标添加至项目(没有项目可新建项目),如图: 要点击查看在线链接才能生成代码点击复制代码在新建标 ...
阿里巴巴IconFont的图标的下载使用
阿里巴巴IconFont的图标的下载使用前言阿里巴巴矢量图标使用步骤前言接着上一篇<Vue实现图片验证码.邮箱验证码以及Cookie记住我功能>,这篇文章主要给大家介绍下阿里巴巴矢 ...

前端使用阿里巴巴矢量图库的图标大全

前端如何使用阿里巴巴矢量图库的图标

1.首先搜索想要的图标

2.添加购物车

3.添加至项目

4.下载至本地

5.引用图标

5.1 unicode引用方式

5.2 font-class引用方式

5.3 Symbol引用方式

前端使用阿里巴巴矢量图库的图标大全相关推荐

最新文章

热门文章