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

Question

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

• 上传 css 文件夹中的 css 文件和字体文件夹中的字体文件，两者都在同一级别。

• 因为这还不足以让它工作，我还在标题中添加了"< link rel="stylesheet" href="/filename.css">" [没有空格]，但也没有工作。

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

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

< link href="metro-icons.css" rel="stylesheet">" [没有空格]）

我上传了 metro-icons.css 并将链接放入我的标题中 - 不起作用。

我是 SVG 的菜鸟，所以说实话，我完全不知道该做什么或我做错了什么，因为我只是不知道 "< span class="mif-home"></span>" 实际上在做什么以及它是如何获得SVG通常......我很抱歉，但也许有人可以启发我？ :(

Answer 1

我只是不知道“" 实际上在做什么以及它是如何获取 SVG 的 通常......我很抱歉，但也许有人可以启发我？ :(

我猜这不是 SVG 问题，而只是字体/css 文件问题 :)

实际上，这个跨度正在使用 Metro 字体 (font-family: 'metro' !important;)，这要归功于您尝试使用的 css 文件中的 mif-* 类。然后使用 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' );

确保：

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