原生js在span里添加阿里图标库的icon不显示
时间: 2023-12-12 17:02:54 浏览: 33
如果你使用的是阿里图标库的图标,需要确认以下几点:
1. 确认你已经正确引入了阿里图标库的 CSS 文件,例如:
```
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxxxx.css">
```
2. 确认你设置的类名与阿里图标库的图标类名一致,例如:
```
<span class="iconfont icon-xxx"></span>
```
其中,icon-xxx 是你需要使用的图标类名。
3. 确认你设置的样式正确,例如设置了正确的宽高、颜色等属性。
如果还是无法解决问题,请提供更多的代码和详细信息,以便我更好地帮助你。
相关问题
原生js在span里添加图标不显示
可能是因为你没有正确设置图标的样式或路径。请检查以下几点:
1. 确认你使用的图标路径正确,可以在浏览器中尝试访问该路径,看看是否能够正常显示图标。
2. 确认你设置的样式正确,例如设置了正确的宽高、颜色等属性。
3. 如果图标是使用伪元素(::before 或 ::after)生成的,则需要设置 content 属性,例如:
```
span::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("path/to/icon.png");
}
```
如果还是无法解决问题,请提供更多的代码和详细信息,以便我更好地帮助你。
原生js如何在span里添加图标
可以通过以下方式在一个 `span` 元素里添加图标:
```html
<span id="my-span"></span>
```
```javascript
// 获取要添加图标的 span 元素
const spanElement = document.getElementById("my-span");
// 创建一个图标元素
const iconElement = document.createElement("i");
iconElement.classList.add("fa", "fa-icon-name"); // 添加图标的 CSS 类名
// 将图标元素添加到 span 元素中
spanElement.appendChild(iconElement);
```
需要注意的是,这里使用了 Font Awesome 的图标库,在添加图标之前需要先将图标库引入到 HTML 页面中。如果不想使用 Font Awesome,可以使用其他图标库或者自定义图标样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)