iconfont怎么引用到html中
时间: 2024-06-10 20:04:10 浏览: 13
引用中提到了三个步骤来将iconfont引用到HTML中。
第一步是打开iconfont阿里巴巴矢量图标库官方网站,找到喜欢的图标并添加到库中,同时建立项目并将所选择的图标放到项目中。
第二步是复制引用图标的地址,并将其写入HTML文件的head标签内的link标签中。
第三步是在HTML的body部分使用<i>标签来引入该图标。
相关问题
iconfont下载本地引用
要下载 iconfont 并在本地使用,可以按照以下步骤操作:
1. 在阿里巴巴矢量图标库(iconfont)上选择需要的图标,加入购物车并下载到本地。
2. 解压下载的文件,找到其中的 `iconfont.ttf` 文件,这是字体文件。
3. 将 `iconfont.ttf` 文件复制到项目的 `fonts` 目录下。
4. 在 CSS 文件中引用字体文件,并设置字体族名(font-family)为 `iconfont`,例如:
```
@font-face {
font-family: 'iconfont';
src: url('./fonts/iconfont.ttf') format('truetype');
}
```
5. 在 HTML 文件中使用该字体,例如:
```html
<i class="iconfont"></i>
```
其中,`` 是该图标对应的 Unicode 编码,可以在下载的图标库中找到。
6. 在 CSS 文件中设置图标的样式,例如:
```css
.iconfont {
font-family: 'iconfont';
font-size: 20px;
}
```
这样就可以在本地使用 iconfont 了。
vue引用iconfont图标
怎么做?
可以通过在HTML文件中引入iconfont的在线链接或下载iconfont文件到本地进行引入,并在最外层的HTML页面中设置全局样式,如下所示:
在HTML文件中引入在线链接:
```html
<head>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_xxxxxxxx.css" />
</head>
```
或者在本地下载iconfont文件后引入:
```html
<head>
<link rel="stylesheet" href="iconfont/iconfont.css" />
</head>
```
设置全局样式:
```css
.iconfont {
font-family: 'iconfont';
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 使用方法 */
<i class="iconfont">ሴ</i>
```