malnvenshorn / OctoPrint-FilamentManager

OctoPrint plugin to manage your filament inventory
GNU Affero General Public License v3.0
131 stars 59 forks source link

Icon in sidebar is broken #25

Closed larp-welt closed 6 years ago

larp-welt commented 6 years ago

Error

The icon in the sidebar is missing.

auswahl_002

Reason for the missing icon

The rease for the missing icon is: The plugin tries to use a icon "fa-reel".

<i class="fa icon-black fa-reel"></i> Filament Manager

But there is no icon "reel" in the Fontawesome font.

The icon is defined inside init.py line 108:

dict(type="sidebar", icon="reel", template="sidebar.jinja2", template_header="sidebar_header.jinja2")

malnvenshorn commented 6 years ago

The icon is defined in static/css/font.css and is shown fine in my browser. Please check if the style sheet and the font file is loaded correctly. What browser do you use?

larp-welt commented 6 years ago

Ahhh, that's interessting!

Octoprint doesn't load any file static/css/fonts.css on my system, but a file http://servername.local/static/webassets/packed_plugins.css?4c88f514. That file contains the lines:

@font-face {
  font-family: 'icomoon';
  src:  url('../../plugin/filamentmanager/static/fonts/icomoon.eot?2tngg');
  src:  url('../../plugin/filamentmanager/static/fonts/icomoon.eot?2tngg#iefix') format('embedded-opentype'),
    url('../../plugin/filamentmanager/static/fonts/icomoon.ttf?2tngg') format('truetype'),
    url('../../plugin/filamentmanager/static/fonts/icomoon.woff?2tngg') format('woff'),
    url('../../plugin/filamentmanager/static/fonts/icomoon.svg?2tngg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa-reel {
  font-family: icomoon;
}

.fa-reel:before {
  content: "\e900";
}

But using the web developer tools, I can't see any access to one of the font files. :-(

I'm using Chrome 62 under Ubuntu 17.04.

larp-welt commented 6 years ago

Argh, sorry, silly me! It loads the font file just fine!

But it doesn't show the icon!

larp-welt commented 6 years ago

That is, what is looks like in Firefox under Linux:

auswahl_004

That is Edge under Win10:

edge

And that's IE 11 under Windows 10:

ie

malnvenshorn commented 6 years ago

Just tested it with Chrome, Firefox and Vivaldi, but i can't reproduce this. The icon loads correct.

Edit: Also tested IE11 with the same result.

larp-welt commented 6 years ago

Strange! I've setup my octoprint server completly new, and now I can see the icon too!

Must have be a strange error in my setup!