-1

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? :(

bad_coder
  • 11,289
  • 20
  • 44
  • 72
SVGal
  • 3
  • 1

1 Answers1

0

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:

  1. Your CSS file is correctly displayed it the defined folder
  2. Your CSS file can find the font file into your folders.
jrmy_o
  • 148
  • 9
  • Hey and thank you for your time! And thank you for explaining the span. For 1: if I link it to get_stylesheet_uri()/metro-icons.css (because I uploaded it in no folder at all) should this be ok? I don't know, because it's still not working. But could be possible because of 2: metro icon font-website does not state anything about fonts, it's only the css. Is it even possible like this? I'm so confused about this actually... – SVGal Jul 01 '20 at 12:36
  • I don't know metro framework much, but did you linked all the needed file as it's recommended on https://metroui.org.ua/intro.html ? CSS and JS files – jrmy_o Jul 01 '20 at 13:01
  • 1
    oh, i'm so totally blind... thank you so much, the js files were the key! – SVGal Jul 02 '20 at 15:15
  • 1
    and also thank you for taking your time and being nice even though i was just toally blind. I focused on the icons-page and totally missed the introduction one, sigh. – SVGal Jul 02 '20 at 15:16