OctoPrint's some icons are broken

[ygtc]

After updated to 0.5.2 some icons of OctoPrint is not generated correctly.

As you see in screenshots. There is no problem with release 0.5.1

I know this happened because font-awesome version but how can i solve this issue? Or am i have to go back to 0.5.1 for now?

[jneilliii]

I was afraid of that kind of issue. Let me check into it.

[jneilliii]

I just verified, I am not seeing the same thing as you as I had TouchUI installed, which seems to bundle the older font awesome icons. I'll see about resolving this, potentially using the v4 shim file. Will report back shortly.

[ygtc]

Ok. I will wait :+1:

[jneilliii]

Try installing this version and let me know if it fixes it for you. It did for me.

https://github.com/jneilliii/OctoPrint-TabOrder/archive/0.5.3.zip

[ygtc]

I am trying now.

[ygtc]

Yes, Fixed this issue!! :+1: Omg man you re so fast to fix errors :rofl:

Thank You :+1:

By the way i noticed that all icons are bold now and every slim version of icons are pro :flushed: So we are stucked :sweat: Just for sayin :rofl:

[sergeolkhovik]

Hi! Tried this plugin but got a problem with icons, no icon is displayed at tabs (configuration is almost the same as https://community.octoprint.org/uploads/default/original/1X/3f9bca298c47cc518337a51c0153236a62798f57.png), screenshot attached. Also checked if TouchUI may affect this - no result both with enabled and disabled.

What's wrong? I see no errors in browser console (like missing css or font file), HTML looks good:

PS: not sure if that's important, trying to get full list of installed plugins, for now here's a listing of ./OctoPrint/venv/lib/python2.7/site-packages/ folder:

% ls -1 ./OctoPrint/venv/lib/python2.7/site-packages/
argh-0.26.2-py2.7.egg
awesome_slugify-1.6.5-py2.7.egg
Babel-2.6.0-py2.7.egg
backports_abc-0.5-py2.7.egg
backports.ssl_match_hostname-3.7.0.1-py2.7.egg
Bed_Visualizer-0.1.7.dist-info
blinker-1.4-py2.7.egg
certifi-2019.3.9-py2.7.egg
chainmap-1.0.3-py2.7.egg
chardet-3.0.4-py2.7.egg
click-6.2-py2.7.egg
easy-install.pth
easy_install.py
easy_install.pyc
emoji-0.4.5-py2.7.egg
feedparser-5.2.1-py2.7.egg
Flask-0.10.1-py2.7.egg
Flask_Assets-0.10-py2.7.egg
Flask_Babel-0.9-py2.7.egg
Flask_Login-0.2.11-py2.7.egg
Flask_Principal-0.3.5-py2.7.egg
frozendict-1.2-py2.7.egg
future-0.15.2-py2.7.egg
futures-3.1.1-py2.7.egg
idna-2.8-py2.7.egg
itsdangerous-1.1.0-py2.7.egg
Jinja2-2.8.1-py2.7.egg
Markdown-2.6.11-py2.7.egg
MarkupSafe-1.1.1-py2.7-linux-armv7l.egg
monotonic-1.3-py2.7.egg
netaddr-0.7.19-py2.7.egg
netifaces-0.10.9-py2.7-linux-armv7l.egg
numpy
numpy-1.16.2.dist-info
OctoPrint-1.3.10-py2.7.egg
octoprint_bedlevelvisualizer
octoprint_detailedprogress
OctoPrint_DetailedProgress-0.1.4-py2.7.egg-info
octoprint_opitemp
OctoPrint_OpiTemp-1.0.6-py2.7.egg-info
octoprint_preheat
octoprint_PrintTimeGenius
OctoPrint_PrintTimeGenius-1.3-py2.7.egg-info
octoprint_simpleemergencystop
OctoPrint_SimpleEmergencyStop-0.2.5-py2.7.egg-info
octoprint_stats
OctoPrint_Stats-1.0.0-py2.7.egg-info
octoprint_taborder
OctoPrint_TabOrder-0.5.3-py2.7.egg-info
octoprint_touchui
octoprint_webcamtab
OctoPrint_WebcamTab-0.1.2-py2.7.egg-info
pathtools-0.1.2-py2.7.egg
pip
pip-19.0.3.dist-info
pkginfo-1.4.2-py2.7.egg
pkg_resources
pkg_resources-0.0.0.dist-info
Preheat-0.3.1-py2.7.egg-info
psutil-5.4.8-py2.7-linux-armv7l.egg
pyasn1-0.4.5-py2.7.egg
pylru-1.0.9-py2.7.egg
pyserial-3.4-py2.7.egg
python_dateutil-2.6.1-py2.7.egg
pytz-2018.9-py2.7.egg
PyYAML-3.10-py2.7-linux-armv7l.egg
regex-2019.3.12-py2.7-linux-armv7l.egg
requests-2.21.0-py2.7.egg
rsa-3.2.3-py2.7.egg
sarge-0.1.5.post0-py2.7.egg
scandir-1.3-py2.7-linux-armv7l.egg
semantic_version-2.4.2-py2.7.egg
setuptools
setuptools-40.9.0.dist-info
singledispatch-3.4.0.3-py2.7.egg
six-1.12.0-py2.7.egg
speaklater-1.3-py2.7.egg
tornado-4.5.3-py2.7-linux-armv7l.egg
TouchUI-0.3.12-py2.7.egg-info
Unidecode-0.4.21-py2.7.egg
urllib3-1.24.1-py2.7.egg
watchdog-0.8.3-py2.7.egg
webassets-0.12.1-py2.7.egg
websocket_client-0.40.0-py2.7.egg
Werkzeug-0.8.3-py2.7.egg
wheel
wheel-0.33.1.dist-info
wrapt-1.10.11-py2.7-linux-armv7l.egg

[jneilliii]

This is a documentation issue on my end. With the new version of fontawesome bundled in the plugin you have to use the newer class names. You just have to prefix the ones you have with fas.

[sergeolkhovik]

Yes, that worked! Thank you! But I just realized another problem:

Octoprint is latest stable: 1.3.10 Could this plugin (or these fas/fa issue) be a reason? In HTML I see:

But if I manually change fa to fas in console - that doesn't help.

[jneilliii]

Those specific icons are broken I believe with touchui enabled. Haven't had the time to get a workaround in place for that yet.

[sergeolkhovik]

Yes, I have touch UI installed. Even more, just found on cellphone this:

How can I fix this? Thanks!

[jneilliii]

I don't think you can at this time. There's just a conflict between the two plugins. Tab Order adds those icons to the page in a way that TouchUI doesn't know how to handle. I've recently learned of ways to detect if TouchUI is installed/enabled and will try to integrate the necessary changes to my plugin to prevent my plugin from adding the icons when TouchUI is enabled, or potentially overlaying the custom icon in a way that plays nicely with TouchUI. As stated, I just haven't had the time to work on any of my plugins lately because of work.

[sergeolkhovik]

Got you, thanks! So looking forward for update.

[GilDev]

This is a documentation issue on my end. With the new version of fontawesome bundled in the plugin you have to use the newer class names. You just have to prefix the ones you have with fas.

I think this should be clearly written in the README file. I’ve spent quite a bit of time to understand I should put fas fa-camera instead of fas-camera by just looking at the changelog’s mention. 🙂