ISSUE - devicons not showing

[jccguimaraes]

ISSUE

devicons not showing

Environment

• OS: Any;
• Atom: Any;
• Any other particularity;

Steps

Can't reproduce, just that some people don't have the devicons properly rendered

[Hammster]

I have the same issue again, 'devicons' as a font is loaded from another plugin in my case from toolbar. And sadly there are two diffrent devicons out there, my first idea would be to prefix our devicons font as file to prevent overriding and then also change the font name with the same prefix.

Hope this helps you, and keep up the great work 💖

[jccguimaraes]

this is awesome! Thanks. Let's pick each other's brain on this

[Hammster]

Preferable, we ditch the iconfonts in favor of SVG generally since we can have the advantage of electrons crossplatform consistant enviroment.

The main advantages are

• Preventing font conflicts
• Not dependant on the charset
• Better antialiasing
• Extensible
  • For custom icons
  • Possibility to allow users to have their own icons

The possible downside would be

• Rewrite of the system how we present icons
• Loading time (? We need to test that, i never done this with electron/atom)

But generally it only has advantages, we can even get the src icons of devicons which are SVGs already, same applies to octicons btw.

I'll try to provide a prototype implementation on my fork in the next days. 🔨

[jccguimaraes]

cool work!

just one quick note, can we take them without breaking their license?

[Hammster]

MIT, we have to credit them and add a copy of the license which should not be a problem. Same for octicons ;)

[jccguimaraes]

@Hammster any updates on this ? :)

[jccguimaraes]

https://github.com/file-icons/DevOpicons

[Hammster]

@jccguimaraes jep, i am working on the changes just had to do it in small bits. I hope i'll be done in the next days. Also the icons look sharper, I can give you a screenshot tomorrow.

Also thanks for the link, this was a issue on my Todo 👍

[ninthart]

Just to let you know, that while I have this issue too, it only happens in Atom Beta (1.17.0-beta5), and not in the stable channel…

[Hammster]

@ninthart could you tell me the plugins you use? on stable and beta

[ninthart]

@Hammster Sure. It's the same on both:

Community Packages (132) /Users/bradbrooks/.atom/packages ├── Altered@1.0.1 ├── atom-autocomplete-php@0.22.2 ├── atom-beautify@0.29.24 ├── atom-bootstrap4@1.4.0 ├── atom-commander@0.9.0 ├── atom-css-comb@3.1.0 ├── atom-fix-path@0.1.0 ├── atom-html-preview@0.1.22 ├── atom-image-resize@0.3.0 ├── atom-message-panel-service@0.0.1-1 ├── atom-minify@0.8.0 ├── atom-shortcuts@0.0.2 ├── atom-slack-snippets@0.2.0 ├── atom-ternjs@0.18.3 ├── atom-trello@0.7.1 ├── atom-zurb-foundation@2.0.0 ├── atomizr@0.23.1 ├── autocomplete-emojis@2.5.0 ├── autocomplete-font-awesome@0.1.0 ├── autocomplete-html-entities@0.1.0 ├── autocomplete-modules@1.6.10 ├── autocomplete-nunjucks@0.5.0 ├── autocomplete-paths@1.0.5 ├── autocomplete-project-paths@2.2.0 ├── autocomplete-wordpress-hooks@0.2.2 ├── autoprefixer@3.7.0 ├── browser-plus@0.0.87 ├── browser-refresh@0.9.0 ├── build@0.67.0 ├── build-grunt@0.4.0 ├── busy@0.7.0 ├── busy-signal@1.4.1 ├── caniuse-css@1.1.5 ├── chrome-color-picker@0.8.0 ├── clone-cursor@1.1.2 ├── color-picker@2.2.5 ├── config-import-export@0.3.1 ├── csslint@1.1.5 ├── csstree-validator@0.0.12 ├── dash@1.7.1 ├── data-atom@0.25.1 ├── docblockr@0.9.4 ├── emmet@2.4.3 ├── emmet-snippets-compatibility@1.0.6 ├── expose@0.14.0 ├── file-icons@2.1.5 ├── filecolor@0.4.0 ├── flexbox-snippets@0.3.0 ├── git-control@0.9.0 ├── git-plus@7.8.0 ├── git-time-machine@1.5.9 ├── grunt-runner@0.14.0 ├── highlight-column@0.5.2 ├── highlight-selected@0.13.1 ├── hosts-edit@1.0.0 ├── html-entities@0.4.0 ├── imagemin@1.5.1 ├── improved-autocomplete-php@1.1.1 ├── intentions@1.1.2 ├── language-jsont@0.3.0 ├── language-markdown@0.22.0 ├── language-nunjucks@4.1.0 ├── language-postcss@1.3.1 ├── language-pug@0.0.21 ├── language-sql-mysql@0.3.1 ├── language-svg@0.9.2 ├── less-than-slash@0.16.0 ├── linter@2.1.4 ├── linter-csslint@1.3.4 ├── linter-htmlhint@1.3.3 ├── linter-jshint@3.1.2 ├── linter-jsonlint@1.3.0 ├── linter-markdown@4.0.1 ├── linter-php@1.3.2 ├── linter-phpmd@1.5.3 ├── linter-pug@1.3.1 ├── linter-scss-lint@3.1.0 ├── linter-stylelint@3.10.0 ├── linter-tidy@2.3.1 ├── linter-ui-default@1.2.4 ├── lipsum@0.1.0 ├── livestyle-atom@0.2.9 ├── markdown-preview-enhanced@0.12.3 ├── markdown-preview-plus@2.4.9 ├── markdown-toolbar@0.1.2 ├── markdown-writer@2.6.5 ├── merge-conflicts@1.4.4 ├── minimap@4.28.2 ├── minimap-bookmarks@0.4.2 ├── minimap-codeglance@0.4.6 ├── minimap-cursorline@0.2.0 ├── minimap-find-and-replace@4.5.2 ├── minimap-highlight-selected@4.6.1 ├── minimap-linter@2.0.0 ├── minimap-pigments@0.2.2 ├── minimap-selection@4.4.0 ├── minimap-split-diff@0.3.7 ├── monokai-php-css-syntax@0.2.2 ├── navigate@0.1.17 ├── open-in-browser@0.5.0 ├── php-cs-fixer@4.1.0 ├── pigments@0.39.1 ├── platformio-ide-terminal@2.5.0 ├── project-viewer@1.0.14 ├── quick-editor@0.4.3 ├── scratch@1.2.0 ├── script@3.14.1 ├── simple-drag-drop-text@0.3.4 ├── snippet-generator@0.3.2 ├── source-preview@0.5.0 ├── source-preview-pug@0.2.0 ├── source-preview-sass@0.1.6 ├── split-diff@1.3.1 ├── stylefmt@4.1.1 ├── svg-preview@0.11.0 ├── svgo@2.8.5 ├── sync-settings@0.8.1 ├── toggle-quotes@1.0.1 ├── tool-bar@1.1.0 ├── tool-bar-almighty@0.8.2 ├── transform@0.4.0 ├── tree-view-autoresize@1.6.0 ├── tree-view-copy-relative-path@1.1.0 ├── tree-view-git-branch@0.1.2 ├── tree-view-git-status@1.3.1 ├── tree-view-open-files@0.3.0 ├── twilight-updated-ninthart-syntax@0.5.3 ├── twilight-updated-syntax@0.5.5 ├── wordcount@2.10.4 ├── wordpress-api@1.2.2 ├── wordpress-dictionary@4.4.0 └── xeta-syntax@0.5.0

Git Packages (1) /Users/bradbrooks/.atom/packages └── emmet-atom-plugin@0.0.1 (emmetio/atom-plugin#45a43c4b)

[Hammster]

Thx for the fast reply, i hope after the icon system rewrite this will no longer happen. btw @jccguimaraes current state is that i still need to fix some things on mac and linux but it works on windows.

I will give you some insight once i am home

[swensorm]

Some of my colleagues have had this happen over the last few months and it just happened to me after Atom updated to 1.17. Once gone, we haven't found a way to get them back, even after wiping out all traces of Atom and re-installing.

Somehow the styling is disappearing. In the below image, the icon works but the devicon does not. It's missing the css ::before for displaying the image altogether.

The stylesheet project-viewer.less is loading and it contains all the .devicons styles, but for some reason they're not being used and this is instead:

I searched .atom for BlinkMacSystemFont and only found it as part of linter-ui-default, and the compile-cache folder for project-viewer. I have been unable to find where that's being pulled from and included in the less and style-manager compile caches.

[mdeuerlein]

FIX: Just move the inline import of devicons (line 199) outside the class .pv-has-icons and to the top (line 3)

File: atom-project-viewer/styles/project-viewer.less Line199: @import (inline) "../node_modules/devicons/css/devicons.min.css";

see commit: 18b8bb44648df15951c68837f89a47ad64c94296

[jccguimaraes]

:scream: