Icons not showing

[ameerh]

@cle61 I have integrated arctic admin with Rails5 API application. Its integrated fine and everything works well except the icons, they are not displaying. Please see attached screenshot.

I did import font-awesome. Here is my active_admin.css.scss file looks like:

@import "font-awesome";
@import "arctic_admin/base";

[cprodhomme]

You can remove the line : @import "font-awesome"; it's useless.
which version of arctic_admin and font-awesome-rails do you use ?

[ameerh]

@cle61 Below are the gems in Gemfil:

gem 'arctic_admin'
gem "font-awesome-rails"
gem 'font-awesome-sass'

I have tried after removing @import "font-awesome"; but its still same. Please advise.

[cprodhomme]

give me the exact version in the Gemfile.lock, please.

[ameerh]

Its arctic_admin (1.5.0)

[cprodhomme]

and "font-awesome-rails" & 'font-awesome-sass' ? I think you use font-awesome 5 and arctic_admin use font-awesome 4

[ameerh]

font-awesome-sass (5.0.13)
font-awesome-rails (4.7.0.4)

[cprodhomme]

arctic_admin use font-awesome 4 and you use font-awesome 5. I need to update arctic_admin but i don't have the time now.
If you don't use the gem font-awesome-sass, remove it

[ameerh]

@cle61 Yes I am not using it. I have removed it from gemfile. Its giving this error now:

Here is my active_admin.css.scss file looks like:

@import "font-awesome";
@import "arctic_admin/base";

[wasifhossain]

@ameerh I think you also dont need @import "font-awesome"; can you try again after removing the line? thanks

[ameerh]

@wasifhossain It shows the same error message even after removing @import "font-awesome";

[wasifhossain]

@ameerh so you are sure that you removed all font-awesome import/require variations as well as related gems still getting the error: File to import not found or unreadable: font-awesome ?

Logically if you remove all the references of a particular resource from js/css manifest files, it should not end up with errors like: <resource> not found. No?

[ameerh]

This trick works

Gemfile
gem 'arctic_admin' gem 'font-awesome-sass'
active_admin.css.scss

@import 'font-awesome.css'; @import "arctic_admin/base";

[Divepit]

hello, I'm also struggling with this issue on production (not on development though) and I tried the suggested fixes and also have font-awesome-rails 4 installed. Is there a different solution for this?

[jcarlos7121]

Same issue here, already tried the suggested above

[cprodhomme]

I have created a new version 2.0.0 with the gem font-awesome-sass, do you have test ?

[EvanBrightside]

@cprodhomme the same problem / Arctic Admin 2.0.0 and no icons (font-awesome)

[cprodhomme]

Fix in the version 2.0.1 ! thanks for the repport ! :)

[mykeeouellet]

icons still not showing, is there someone that knows a fix in 2020 ?

[cprodhomme]

@mykeeouellet can you give me some context ? What is your gemfile ? Sass version

[cprodhomme]

Someone with the can test with the branch fix/#57

https://github.com/cprodhomme/arctic_admin/tree/fix/%2357

[EvanBrightside]

@cprodhomme im just tried branch fix/#57 / not working for me, no icons
its rails 6 / activeadmin 2.7.0 / arctic_admin 3.2.0

[EvanBrightside]

@cprodhomme for adding FA icons to arctic admin (with rails 6 / webpacker / activeadmin 2.7.0 / arctic_admin 3.2.0) we just need:

1. yarn add @fortawesome/fontawesome-free
2. Add import "@fortawesome/fontawesome-free/js/all.js"; and import "@fortawesome/fontawesome-free/css/all.css"; to /app/javascript/packs/active_admin.js

[mehmetaydogduu]

Any guide for rails 6 without yarn webpacker?
I am using sprockets.

[hgeorgilas]

@EvanBrightside Wouldn't work with .scss files, not sure if I did something wrong there.
I had to do the following to make the webfonts work

In app/javascript/stylesheets/active_admin.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';

[CR1AT0RS]

I am using rails 6. This is what you need to do in order to fix missing icons:

• yarn add @fortawesome/fontawesome-free
• import "@fortawesome/fontawesome-free/css/all.css"; to /app/javascript/packs/active_admin.js

As @EvanBrightside pointed out thank you for that. But you don't need to add the full js library: import "@fortawesome/fontawesome-free/js/all.js"; it adds a 1.1 mb additional size you wanna import that via webpacked for only things you need. This import will import the full JS and not recommended for production.

[revskill10]

Doesn't work with sprockets