如何轻松使用阿里云得矢量图标库

一.前提条件:
请申请一个github账号,
大致步骤如下:申请一个邮箱账号(最好是阿里云的)—>访问github官网(https://github.com/)点击sign up进行注册(注意要按照要求来注册,否则很容易不成功)–>登录github 账号(第一次登录时,可能要验证邮箱地址才能新建仓库,不要忘记进入邮箱点击github发送至邮箱的验证邮件).
二.基本步骤:
进入iconfont官网(https://www.iconfont.cn/),第一次进入会需要登录你的github账号.
–>选择你需要的图标加入购物车
—>然后将购物车中的图标添加至新建项目
—>有三种方式可以来使用字体图标,分别时Unicode\font class\symbol三种方式
Unicode:
1.点击刷新复制图标上面的代码:
@font-face {
font-family: ‘iconfont’; /* project id 1742510 */
src: url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.eot’);
src: url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.eot?#iefix’) format(‘embedded- opentype’),
url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.woff2’) format(‘woff2’),
url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.woff’) format(‘woff’),
url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.ttf’) format(‘truetype’),
url(’//at.alicdn.com/t/font_1742510_vrhiz4qpowe.svg#iconfont’) format(‘svg’);
}
因为要在本地文件中引用,所以需要在每个网址前面加上https:,以便通过网址访问阿里提供的.eot文件(与配置文件类似)
2.在style标签中放入上面的代码@font-face,
3.开始使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体图标库</title><style>/* 1. 声明自定义字体库为iconfont */@font-face {font-family: 'iconfont';  /* project id 1741477 */src: url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.eot');src: url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.eot?#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.woff2') format('woff2'),url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.woff') format('woff'),url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.ttf') format('truetype'),url('https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.svg#iconfont') format('svg');}/* 2.使用声明好的字体库 */.iconfont {font-family: iconfont;font-style: normal;}ul > li:hover  {color: teal;}ul.department {list-style: none;}ul.department > li::before {font-family: "iconfont";content: "\e6a5";}</style>
</head>
<body><div style="font-family: iconfont;">&#xe6a8;</div><i class="iconfont">&#xe6a8;</i><ul><li><i class="iconfont">&#xe6ad;</i><span>首页</span></li><li><i class="iconfont">&#xe6a8;</i><span>列表</span></li><li></li></ul><ul class="department"><li>JavaEE</li><li>WebUI</li><li>Big Data</li><li>IOT</li></ul></body>
</html>

Font class:
同样也是点击font class 复制生成的.css文件(//at.alicdn.com/t/font_1742510_vrhiz4qpowe.css)放到要使用的代码中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体图标库</title><!-- 1. 导入生成好的css文件 --><link rel="stylesheet" href="https://at.alicdn.com/t/font_1741477_hz8bq8tgz2r.css">
</head>
<body><!-- 2. 使用，class必须包含iconfont --><i class="iconfont icon-RectangleCopy"></i><i class="iconfont icon-RectangleCopy5"></i>
</body>
</html>

以上资料,还可以参考帮助文档,会更加的详细
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

如何轻松使用阿里云得矢量图标库相关推荐

uni-app（一）----引入阿里云矢量图标库
这段时间因为老师要求,要做一个小程序,所以开始学一下uni-app开发,以后我会把我学的东西都发出来.现在写一下关于引入阿里云矢量图标库的方法添加图标首先去官网选择你喜欢的图标你可以在这搜索你想 ...
uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
【sciter】：sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存步骤三:点击 Font cla ...
11月14日云栖精选夜读：轻松使用阿里云资源编排_方便你的API管理
点击有惊喜 11月初,阿里云ROS正式发布API 网关(API Gateway)资源,为云计算用户提供高性能.高可用的 API 托管服务,帮助用户对外开放其部署在 ECS.容器服务等阿里云产品上的应用 ...
11月14日云栖精选夜读：轻松使用阿里云资源编排，方便你的API管理
摘要: 11月初,阿里云ROS正式发布API 网关(API Gateway)资源,为云计算用户提供高性能.高可用的 API 托管服务,帮助用户对外开放其部署在 ECS.容器服务等阿里云产品上的应用,提 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...

如何轻松使用阿里云得矢量图标库

如何轻松使用阿里云得矢量图标库相关推荐

最新文章

热门文章