html 页面如何引用阿里云图标？
1.进入阿里云图标库（iconfont-阿里巴巴矢量图标库）
2.搜索自己想要的阿里云图标(如：telphone)
3.找到自己想要的图标，加入购物车
4.可以加入项目或直接下载代码
5.下载好后，找到下载的包，将iconfont下的四个文件放到项目中
6.有三种方法可以 引用iconfont，方法如下：
Unicode 引用
- 电话图标

- 美元符号

- 货车

- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
第一步：拷贝项目下面生成的 @font-face
@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff2') format('woff2'),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;-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>font-class 引用
电话图标
.icon-dianhuatubiao
- 美元符号
.icon-meiyuanfuhao
- 货车
- .icon-huoche
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>Symbol 引用
电话图标
#icon-dianhuatubiao
- 美元符号
#icon-meiyuanfuhao
- 货车
#icon-huoche
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>html 页面如何引用阿里云图标？相关推荐
- html、小程序引用阿里云图标方法
html引用 样式 //阿里云图标项目里生成的链接 @font-face {font-family: 'iconfont'; /* project id 1603983 */src: url('//a ...
- 在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件 注意文件路径 4.引入 ...
- 微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
- 阿里云图标使用 (symbol 引用方式)
阿里云图标网址: https://www.iconfont.cn/ 一.登录注册 这个简单,就不说了 二.给当前项目找图库 2.1.添加项目 2.2.寻找图标添加入库 添加入库 2.3.打开入库 的图 ...
- vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式 兼容性较差,支持 ie9+,及现代浏览 ...
- 图标选择器之批量复制阿里云图标名称和图标代码
在项目中需要做一个图标选择器,使用的是阿里云图标,所以需要复制阿里云项目里的全部图标名称和图标代码-一个项目中有几十甚至上百个图标,一个个复制会很费劲 O__O "- F12打开控制台粘贴以 ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- 如何将阿里云图标导入到微信小程序
如何将阿里云图标导入到微信小程序 阿里巴巴矢量图标库网址 1.先注册一个账号: 2.点击"Icons&Projects",通过关键词搜索想要的图标: 3.选中看中的图标,加 ...
- 小程序symbol引入阿里云图标
需求:链接引入有颜色的图标 方法:阿里云symbol引入图标 资料:阿里云图标 步骤: (阿里云图标加入和复制symbol链接忽略不写了) 初始化生成配置文件package.json npm init ...
最新文章
- tensor和模型 保存与加载 PyTorch
- 微型计算机技术 第三章,微型计算机技术第三章部分答案概要.docx
- android开发学习 ------- MongoDB数据库简单理解
- HDFS数据迁移解决方案之DistCp工具的巧妙使用
- linux 内核 获取随机数
- 谷歌开源机器学习可视化工具 Facets：从全新角度观察数据
- Scala里的控制台输出print实现原理
- 什么？你做的差异基因方法不合适？
- 【IT】学生数据库小结2
- quartus II 13.1 软件破解
- 基于springboot+mysql的房地产中介管理系统
- phpstud使用教程_phpstudy使用方法详细图文教程
- retrofit + rxjava2报错java.lang.IllegalStateException:Excepted a String but was BEGIN_OBJECT at line..
- python人像美颜_人像美颜美妆算法入门必备
- 标准盒子模型简单讲解
- 没有互联网的济南，要怎么从冬天走向春天？
- 用pe修改计算机ip地址,实现WinPE上网功能修改IP及DNS方法
- 不论微信钉钉还是什么软件，我写了个通用的消息监控处理机器人
- DIX和DIF该诉你，什么叫端到端数据一致性
- 计算机word做课程表实验报告,《用word做课程表》教学设计