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">&#x33;</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 ...

html 页面如何引用阿里云图标？

Unicode 引用

第一步：拷贝项目下面生成的 `@font-face`

第二步：定义使用 iconfont 的样式

第三步：挑选相应图标并获取字体编码，应用于页面

font-class 引用

第一步：引入项目下面生成的 fontclass 代码：

第二步：挑选相应图标并获取类名，应用于页面：

Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

html 页面如何引用阿里云图标？相关推荐

最新文章

热门文章

html 页面如何引用阿里云图标？

Unicode 引用

第一步：拷贝项目下面生成的 @font-face

第二步：定义使用 iconfont 的样式

第三步：挑选相应图标并获取字体编码，应用于页面

font-class 引用

第一步：引入项目下面生成的 fontclass 代码：

第二步：挑选相应图标并获取类名，应用于页面：

Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

html 页面如何引用阿里云图标？相关推荐

最新文章

热门文章

第一步：拷贝项目下面生成的 `@font-face`