web 阿里矢量图标
一、阿里矢量图标(字体图标)
网址:iconfont-阿里巴巴矢量图标库
1.使用步骤
1.登录阿里矢量图标网站
2.搜索想要的图标且加到购物车
3.点击右上角的购物车
4.选择下载代码,下载完成后解压文件
5.把下载的文件放到你的项目中
6.引入iconfont.css文件或者iconfont.js文件
使用三种方式:下载代码
1、Unicode 方式引用
Unicode 是字体在网页端最原始的应用方式,特点是:
兼容性最好,支持 IE6+,及所有现代浏览器。
支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
2、font-class 方式引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
兼容性良好,支持 IE8+,及所有现代浏览器。
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
3、Symbol方式引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。兼容性较差,支持 IE9+,及现代浏览器。
浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style> .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; } //改变样式.icon{width: 100px;height: 100px;font-size: 20px; display: block;} </style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>
2.引入字体图标第二种方式:添加至项目
项目引入:1.选好图标添加至项目2.选择要添加的项目(如果没有项目点击右上角新建项目),点击确定3.下载至本地4.解压文件,把文件放到代码中5.正常使用 添加新的图标1.把新的图标选好之后,点击添加项目,选择你要添加的项目2.下载至本地3.解压文件,把文件放到代码中(此时下载的这个文件包括上次选的图标,也包括这次选的新的图标)4.正常使用 添加新的图标下载文件后,把原来的文件替换掉,再把iconfont.css和iconfont.js文件链接替换一下即可 与下载代码的区别:下载代码:如果添加新的图标,需要再新下载一个文件,且这个文件的图标与上个文件的图标不能在一个文件中,是两个独立的文件 项目引入:如果添加新的图标,可以把这些图标添加到已有的项目文件,这样原来的图标和这次新添加的图标就可以在新的一个文件里了
二、圆角
圆角
作用:为元素添加圆角边框
单个边定义
语法: border-*-radius
border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度
常用取值
px
百分比
分别相对于宽高计算(非内容)
不允许负值
简写border-radius
语法
空格 隔开
四个值:左上角、右上角、右下角、左下角 水平和垂直半径 三个值:左上角、右上角和左下角,右下角 两个值:左上角与右下角、右上角与左下角 一个值: 四个圆角值相同
""隔开
水平半径(1-4)/垂直半径(1-4)
规则同上
三、阴影
1、盒子阴影
语法
box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影(outset默认) h-shadow:阴影的水平偏移量。正数向右偏移,负数向左偏移。 必需 单位: px v-shadow:阴影的垂直偏移量。正数向下偏移,负数向上偏移。 必需 单位: px blur:阴影模糊度,不能取负数。 可选 单位: px spread:阴影大小。正数阴影扩大(阴影大小大于盒子大小),负数阴影缩小(阴影大小小于盒子大小),0阴影与盒子同等大小。 可选 单位: px inset:表示添加内阴影,默认为外阴影。可选 box-shadow: 0 0 20px 10px green inset; 当 spread 为0时,阴影大小与元素大小相同。 .box1 {background-color: yellow;/* 多个阴影 *//* 盒子阴影 */box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;}
可以在一个元素上设置一个或多个阴影,阴影之间用逗号隔开
2、文字阴影
语法
text-shadow: h-shadow v-shadow blur color; text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色; h-shadow 必需,水平阴影的位置,允许负值; v-shadow 必需,垂直阴影的位置,允许负值; blur 可选,模糊距离; color 可选,阴影的颜色; .box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}
可以在一个文字中设置一个或多个阴影,阴影之间用逗号隔开
web 阿里矢量图标相关推荐
- day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具 常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文 阿里矢量图标 day0 ...
- 、阿里矢量图标(字体图标)
# 一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4. ...
- 阿里矢量图标iconfont在微信小程序的使用
阿里矢量图标iconfont在微信小程序的使用 第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 ...
- uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...
- 阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
- 在uniapp里面使用阿里矢量图标(iconfont)
1.到阿里矢量图标官网找到需要的图标.添加进购物车. 2.打开购物车,选择下载代码 3.将下载下来的压缩包打开,打开里面的demo_index.html文件,并将压缩包里面的iconfont.ttf文 ...
- CSS阿里矢量图标(字体图标)
网址: https://www.iconfont.cn 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解压文件 5.把下载 ...
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- # 一、阿里矢量图标(字体图标)网址:https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
最新文章
- linux vim project,vim插件project的用法
- 安卓-控制控件的宽度占屏幕的一半且水平居中显示
- Redis实战之征服 Redis + Jedis + Spring (三)
- python读数据-python数据读写
- 课下测试03!03!03!题目截图及解析(不完全正确)第四周--信息安全系统设计基础...
- 技术面试问项目难题如何解决的_同轴线如何当网线使用?解决改造项目中难题...
- ubuntu网站收集
- 51单片机PWM程序详解
- [RMI TCP Connection(10.0.20.175:2181)] DEBUG org.apache.zookeeper.ClientCnxn - Got ping response for
- 基于SSM的医学健康网站
- ASP.NET的路由系统
- java 仓库管理_Java仓库管理系统(一)
- sitemap-php生成网站地图
- 这么炫酷的轮播图·你想学吗?
- arduino编程语言Wiring参考手册API
- UG NX 三维PMI标注培训
- h5 vr效果_Web端VR初介绍
- 项目管理工具dhtmlxGantt甘特图入门教程(五):甘特图实例特点
- android 嘶嘶 录音 电流音_教你如何轻松解决拾音器的“电流声”
- 除号java_Java基础教程-运算符