无法弄清楚如何使地铁图标字体或天气图标字体正常工作或如何保存 SVG

Question

我就是无法 https://github.com/erikflowers/weather-icons or https://metroui.org.ua/icons.html 工作。我已经在 WordPress 网站上试过了，我试过天气图标：

上传 css-files 在 css-folder 和 font-files 在 font-folder，都在同一级别。
因为这还不够让它工作，我也把 "< link rel="stylesheet" href="/filename.css">" 放在 header [没有 space] 中，但也没有工作.

所以我只是下载了我喜欢的 SVG 并手动将其上传到网站...这行得通，但当我想：好吧，我也会用 metro 做到这一点，这是不可能的，因为我不能'找不到 SVG 文件。我什至尝试从侧面使用 SVG Crowbar 下载它，但没有。所以我想，好吧，“如何使用”听起来很简单，我再试一次

(如何使用：“要激活 Metro 图标字体，您必须使用 metro-all.css 或添加到页面 metro-icons.css.

< link href="metro-icons.css" rel="stylesheet">" [没有 space])

我上传了 metro-icons.css 并将 link 放入了我的 header - 没有用。

我是 SVG 的新手，所以老实说我完全不知道该做什么或做错了什么，因为我不知道 "< span class="mif-home"></span>" 实际上在做什么，它通常是如何获得 SVG 的……对不起，但也许有人可以启发我？ :(

Answer 1

I just don't know what "< span class="mif-home">" is actually doing and how it's getting the SVGs usually... I'm sorry, but maybe someone could enlighten me? :(

我想这不是 SVG 问题，而只是 font/css 文件问题 :)

实际上，由于 mif-* class 通过您尝试使用的 css 文件，此跨度正在使用 Metro 字体 (font-family: 'metro' !important;) .然后使用 css 文件中定义的相应字符设置伪元素 (::before) 的样式。对于 mif-home，它是 "\e900"，这是一个房子图标。

尝试像这样以 WordPress 方式正确排队 css 文件：

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri()/css/filename.css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

确保：

您的 CSS 文件已正确显示在定义的文件夹中
您的CSS文件可以在您的文件夹中找到字体文件。

无法弄清楚如何使地铁图标字体或天气图标字体正常工作或如何保存 SVG

Can't figure out how to get metro icon font or weather icon font working or how to save SVG

css

icons

svg

icon-fonts