vue引用iconfont图标
时间: 2023-08-31 08:04:56 浏览: 56
怎么做?
可以通过在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>
```
相关问题
vue3引用iconfont图标
可以使用以下步骤引用iconfont图标:
1. 在iconfont官网上下载iconfont图标
2. 将下载后的iconfont.css和iconfont.ttf文件放置在项目的src/assets文件夹中,可以自己创建一个iconfont文件夹
3. 在vue项目的main.js中引入iconfont.css文件
4. 使用i标签以及对应的class,即可使用iconfont图标。
例如,使用一个名为“icon”的class,可以添加以下代码:
<i class="icon"></i>
注意,其中的代表对应的字体文件在iconfont.ttf中的unicode码。
vue3项目怎么引用iconfont图标
1. 在iconfont官网上找到需要使用的图标,将其加入购物车。
2. 在购物车中选中需要使用的图标,然后点击右上角的“下载代码”,选择“Symbol”类型,下载代码包。
3. 解压下载的代码包,可以看到其中包含了一个名为“symbol-defs.svg”的文件。
4. 在Vue项目中的public文件夹下创建一个名为“icons”的文件夹,并将“symbol-defs.svg”文件复制到该文件夹中。
5. 在main.js文件中,引入“svg-sprite-loader”和“icons”文件夹中的“symbol-defs.svg”文件:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
// 引入svg-sprite-loader
import 'svg-sprite-loader/dist/cjs.js!./icons/symbol-defs.svg'
createApp(App).mount('#app')
```
6. 在需要使用图标的组件中,使用“svg”标签和“use”标签来引用图标。例如,引用id为“icon-home”的图标:
```html
<template>
<div>
<svg class="icon">
<use xlink:href="#icon-home"></use>
</svg>
</div>
</template>
```
注意:在“use”标签中,使用“xlink:href”属性来指定要引用的图标的id,且该id需要加上“#”前缀。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)