阿里云矢量图html页面引入,iconfont 阿里巴巴矢量图标库使用说明
作为前端,我们也可以更好的利用它,实现网站图标的美化。
首先找到你需要的图标并加入库:三个按钮分别是 加入库、加入收藏和下载
点击下载按钮后会弹出一个窗口,你可以调整任意颜色和尺寸,可以下载 SVG、AI和PNG3种格式。
点击右上角图标,打开库,点击“下载代码”下载字体包,你也可以先添加至项目,然后在“我的项目”里面,点击“下载到本地”进行下载
点击“添加至项目”,你可以添加项目名称,点击“确定”保存到我的项目
在我的项目中,你可以生成在线链接,这里给出3种方式:Unicode、Font class和Symbol
点击“下载至本地”会下载一个包,解压后就可以引入使用了
浏览器打开“demo_xxx.html”可以看到图标的使用方法,有三种引用方式
font-class引用:
首先在头部引入 iconfont.css 文件
然后在 html 代码中使用相应的类名应用于页面
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
unicode引用:
首先拷贝项目生成的 font-face@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');}
定义使用iconfont的样式.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
然后挑选相应图标并获取字体编码,应用于页面3
IconFont 图标
首先引入项目下面生成的symbol代码
加入通用css代码(引入一次就行)
然后挑选相应图标并获取类名,应用于页面
使用的时候只需要保留一种方式所需要的文件和字体文件,其他的删掉就可以了。
阿里云矢量图html页面引入,iconfont 阿里巴巴矢量图标库使用说明相关推荐
- 全网最细,实测可用!Iconfont阿里巴巴矢量库的使用,将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用 阿里巴巴矢量库 使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
- 阿里云OSS图床搭建方法
由于现在一直在CSDN和自己的网站同步写博客记录,可是以前我都是在CSDN编辑器内直接码字上传,但这样的编辑方式很难受,我还是更喜欢像Typora的本地markdown编辑器,这样就需要有一个自己的图 ...
- OSS(阿里云)图床搭建
OSS(阿里云)图床搭建 OSS(阿里云)图床搭建 OSS设置 建立一个Bucket 获取ID和密钥值 下载和配置PicGo 下载 配置阿里云 测试Typroa使用图床 配置信息 测试 错误排查 OS ...
- iPic 添加 阿里云OSS图床
前言 0x01 iPic介绍 某天发现ipic用的好好的,结果图片无法加载了..... 猜测可能是微博的图床挂了... 0x02 阿里云OSS配置 01 这里就尝试使用阿里云的图床试试 进入阿 ...
- 使用iconfont阿里巴巴矢量图标库(最方便的使用方法)
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库 看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
- android+矢量图+插件,如何玩转Android矢量图VectorDrawable
从5.0(api等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大 ...
- 阿里云Apsara Clouder基础技能认证:阿里巴巴编码规范题库(最新题库大全)
阿里云Apsara Clouder基础技能认证:阿里巴巴编码规范(最新题库大全) 先小试几题(附答案解析) 1. 2. 3. 4.索引 本人刚刚考过,小纪念一下,^-^ 更加详细的题库链接,word文 ...
- 码神之路博客系统更换个人卡片图标(iconfont 阿里巴巴矢量图标库的使用)
目录 个人卡片图标 更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
- 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
- 如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中,拿走不谢
登录Iconfont-阿里巴巴矢量图标库 官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
最新文章
- 第7章 jQuery中的事件与动画
- 鸟哥的Linux私房菜(基础篇)- 第十七章、程序管理与 SELinux 初探
- OPC向UNIX的演进(OPC evolution toward UNIX)
- 小米10的Android安全更新,MIUI 12首批更新名单被曝光,小米10系列优先上Android 11...
- search by Belonging to my team测试 - with manager role
- Jenkins-Gitlab配置方法
- aps后缀是什么文件_APS审核真的取消了么?
- python pandas stack和unstack函数
- javascript高级编程学习笔记(二)——继承
- centos7 centos6.5部KVM使用NAT联网并为虚拟机配置firewalld iptables防火墙端口转发...
- 树形表格插件 - vue-table-with-tree-grid
- 基于MTCNN+CNN的疲劳检测
- TortoiseSVN汉化教程
- STM32硬件剖析(STM32F407 定时器功能引脚分配)
- 基于Tensorflow框架的人脸活体检测、人脸属性总结附代码(持续更新)
- 使用绝对定位来实现拉手网上的效果
- struts2之token,类型转换和数据校验
- win10家庭中文版安装docker
- Gurobi安装详细指南-2020最新版
- 基于 Django 3.2 VUE nginx 框架开发 机器学习在线 系统