时间戳

首页 > 解决方案 > 想要在语义 UI 中使用引导图标

css - 想要在语义 UI 中使用引导图标

问题描述

我需要帮助。我的项目在语义 UI 上，但我的项目中需要使用引导图标（https://icons.getbootstrap.com/）。但我无法将 svg 信息直接复制到代码中，因为可读性因素。相反，我正在寻找一些 CSS 备忘单类的 Bootstrap 图标，例如 ( <i class="cat icon"></i>)。只是想知道是否有人创建了 Bootstrap CSS 图标备忘单，或者我们是否有任何解决方案。此外，我无法下载 SVG 图像并将其包含在 img 标签中。请帮我

标签： cssbootstrap-4iconssemantic-ui-css

解决方案

脚步：

选择任何 Bootstrap SVG 图标（在这种情况下选择电话图标）。复制 SVG 代码并创建一个 CSS 类，如下所示。

i.icon.bi-phone::before { display: inline-block; content: ""; background-image: url( 'data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-phone" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/><path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>') !important; background-repeat: no-repeat !important; background-size: 1rem 1rem; width:1em; height:1em; }

将 SVG 代码放入 background-image(svg tag) 应该给出背景图像和背景重复！重要。应给出宽度和高度。这一点在 Bootstrap Icons 用法中没有提到（https://icons.getbootstrap.com/#usage）现在我们可以在我们的 HTML 中使用 Icon 像：

推荐阅读