I just can't get https://github.com/erikflowers/weather-icons or https://metroui.org.ua/icons.html working. I've tried it in a WordPress website, for the weather icons I tried:
Uploading css-files in a css-folder and the font-files in the font-folder, both on the same level.
Because that was not enough to get it working, I also put "< link rel="stylesheet" href="/filename.css">" in the header [without the space], but did not work either.
So I just downloaded the one SVG I liked and uploaded it manually to the website... That worked, but when I thought: ok I'll do that with metro too, it's just not possible because I can't find the SVG files. I even tried downloading it with the SVG Crowbar right from the side itself but no. So I thought, okay, the "how to use" sounds easy, I'll just try that again
(How to use: "To activate Metro Icon Font you must use metro-all.css or add to page metro-icons.css.
< link href="metro-icons.css" rel="stylesheet">" [without the space])
I uploaded the metro-icons.css and put the link into my header - not working.
I'm a noob with SVGs, so to be honest I have no idea at ALL what to do or what I'm doing wrong because I just don't know what "< span class="mif-home"></span>" is actually doing and how it's getting the SVGs usually... I'm sorry, but maybe someone could enlighten me? :(
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? :(
I guess it's not a SVG problem but only a font/css files issue :)
Actually what this span is doing is using the metro font (font-family: 'metro' !important;) thanks to the mif-* class through the css file you're trying to use. Then a pseudo element (::before) is styled with the corresponding character defined in css file. For mif-home it's "\e900" which is a house icon.
Try to enqueue correctly the css file the WordPress way like so :
/**
* 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' );
Make sure: