Bulma and Ionicons

Question

我正在使用Svelte、Bulma和(试图使用(Ionicons。图标不会渲染。我认为这是由于我不正确地放置了ionicons加载脚本。

我的HTML如下：

<i class="ion-ionic add-circle-outline"></i>

Ionicons脚本如下：

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>

我不确定上面的脚本在哪里。我在App.svelte页面的底部尝试了一下，但没有成功。我还试着用标签把它封起来。

谢谢！

Answer 1

您应该将next与bulma 一起使用

<span class="ion-ionic">
<ion-icon name="add-circle-outline"></ion-icon>
</span>

Answer 2

我不知道你的代码来自哪里，官方文档说有一个特定的用法。

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<ion-icon name="add-circle-outline"></ion-icon>

https://ionicons.com/usage

Answer 3

图标元素是一个容器。

<span class="icon is-small has-text-link has-background-grey-lighter">
<!-- Font Awesome 6 -->
<i class="fa-sharp fa-regular fa-chevron-right"></i>
<!-- Font Awesome 5 -->
<i class="far fa-chevron-right"></i>
<!-- Material Design Icons -->
<span class="mdi mdi-chevron-right"></span>
<!-- Ionicons -->
<ion-icon name="chevron-forward-outline"></ion-icon>
</span>

请指定外部的图标元素。