【Html】16-字体图标
阿里字体图标
iconfont-阿里巴巴矢量图标库
国内网站;
需要登录才能使用字体图标;
- 选择字体图标
- 挑选自己喜欢的图标库
- 将选中的图标点击加入到购物车中
- 然后点击右上角的 购物车图标
5.之后我们就可看见添加的图标
一共有三种字体图标样式;
Unicode图标
支持按字体的方式去动态调整图标大小,颜色等等。
默认情况下不支持多色,直接添加彩色图标会自动去色。
可以直接在线生成网络路径
@font-face {font-family: 'iconfont'; /* Project id 2620225 */src: url('//at.alicdn.com/t/font_2620225_zpq6kztphw.woff2?t=1624074247610') format('woff2'),url('//at.alicdn.com/t/font_2620225_zpq6kztphw.woff?t=1624074247610') format('woff'),url('//at.alicdn.com/t/font_2620225_zpq6kztphw.ttf?t=1624074247610') format('truetype');
}
也可以直接下载到本地得到download.zip
然后将解压后的文件复制到项目文件夹中,通过css代码引入:
@font-face {/*字体样式名称*/font-family: 'iconfont';/*字体文件引入路径*/src: url('iconfont.woff2?t=1624073930098') format('woff2'),url('iconfont.woff?t=1624073930098') format('woff'),url('iconfont.ttf?t=1624073930098') format('truetype');
}
然后可以在需要字体图标的CSS样式中加入
font-family: "iconfont" !important;
或者自定义字体图标的CSS,需要的时候直接调用
.iconfont {/*声明字体样式*/font-family: "iconfont" !important;/*以下样式根据自己需要自定义即可*/font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
然后复制字体图标对应的代码
<span class="iconfont"></span>
font-class图标
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
使用 class 来定义图标;替换图标时,只需要修改 class 里面的 Unicode 引用。
可以直接在线生成网络路径的css表,然后用CSS引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_2620225_zpq6kztphw.css">
或者下载至本地,引入本地文件
<link rel="stylesheet" href="./iconfont.css">
然后复制对应的类名
<span class="iconfont icon-beizi"></span>
Symbol图标
- 支持彩色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
可以直接在线生成网络路径的.js,然后用
script
引入
<script src="//at.alicdn.com/t/font_2620225_zpq6kztphw.js"></script>
或者下载至本地,引入本地文件
<script src="./iconfont.js"></script>
然后定义通用代码
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
然后复制字体图标对应的类名:注意前缀加上#号
<svg class="icon" aria-hidden="true"><--复制的类名填入href="#icon-xxx"后面的属性值--><use xlink:href="#icon-diannaozhuo"></use>
</svg>
END
【Html】16-字体图标相关推荐
- 第104天:web字体图标使用方法
字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用 第一步: 首先进入阿里巴巴矢 ...
- css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
- 让字体图标代替雪碧图,减少请求带宽
一.什么是字体图标 icon font 及使用场景 从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...
- React Native 开发豆瓣评分(六)添加字体图标
添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...
- Linux和qt电子横幅,【Qt】 自定义组件_滚动横幅弹窗对话框字体图标等
问题反馈邮箱:1508539502@qq.com 鸣谢 其他组件 BannerLabel 滚动横幅部件 特性可随机添加图片路径及提示信息集合 可清空图片路径及提示信息集合 可设置图片切换时间 可设置提 ...
- 如何在openlayers中使用iconfont或font Awesome字体图标
目录 前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...
- 生成字体图标及其原理
详解使用icomoon生成字体图标的方法并应用 IcoMoon是一个在线的图标字体生成器.其允许我们通过个性化设置生成ICON字体,我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富 ...
- Glyphicon 字体图标
Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效 ...
- iconfont 支持全新的彩色字体图标
大家好,我是若川.iconfont我相信大家都用过,而现在支持全新的彩色字体图标了.这是第二次转载,上一次的好文是2020 前端技术发展回顾. 点击下方卡片关注我.加个星标学习源码整体架构系列.年度总 ...
最新文章
- 2021 IDEA大会开启AI思想盛宴,用“创业精神”做科研
- php邮件加密,怎样对邮件正文分段加密及解密解决思路
- Logistic and Softmax Regression (逻辑回归和Softmax回归)
- 从语言模型到Seq2Seq:Transformer如戏,全靠Mask
- 使用ILSpy探索C#7.0新增功能点
- 九阴真经 第二层 第6天
- [导入][转载]超强大的jquery formValidator
- 浏览器输入一个url会发生什么
- 2020-5-9 开始阅读深入理解java虚拟机
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第1节 常用函数接口_10_常用的函数式接口_Consumer接口中的默认方法andThen...
- elementui表格复制_vue+element-ui做表格的导出功能(一)。
- Iocomp Ultra Pack ActiveX 5.12
- 修复EXE文件无法打开
- 74HC138 三八译码器
- 【java期末复习题】第15章 JDBC数据库编程
- python group与groups 详解以及区分
- “Failed to load response data“ django@xframe_options_exempt 网站不许 Firefox 显示被嵌入的网页
- 数据分析从零到精通第二课 Hive和Spark入门
- Unity 程序升级(PC版非热更新)
- 客户端与服务器交互的功能,如何进行测试?
热门文章
- php微信公众号测试账号密码,微信公众号测试账号配置失败竟然是因为一个字符...
- java项目——大数据量的处理
- bigquery_为什么BigQuery Omni很重要
- 人力资源管理案例-左右为难的经理
- Assertion断言的使用
- c语言收银系统程序编码,C语言 超市收银系统.doc
- UVA 10004 Bicoloring (二分染色)
- Codeforces14 E. Camels(dp)
- 单8通道数字控制模拟电子开关CD4051
- Matlab新老版本的差别问题——CAGD课程设计