why Fa ui-icon-3d-rotation can't display in my jhipster app

Post Reply
qgzhiguo
Posts: 2
Joined: 06 Jun 2016, 06:24

07 May 2018, 09:53

I integrate Ultima and jhipster App, and I intend to display icons in the page. Here is my code snippet.

<i class= "Fa fa-camera-retro fa-3x" ></i> fa-3x

<i class= "Fa ui-icon-3d-rotation" ></i>3d-rotation

However, the first icon in the web page can be displayed correctly, while the second can not be displayed.

In the debug mode, the viewer is displayed as <svg class= "svg-inline--fa fa-w-16 ui-icon-3d-rotation" aria-hidden= "true" data-prefix= "Fa" data-icon= "null".

Why data-icon= "null" and how to solve this problem?

User avatar
aragorn
Posts: 2985
Joined: 29 Jun 2013, 12:38

15 May 2018, 16:28

Could you please check the following css after selecting <i class= "Fa ui-icon-3d-rotation" ></i> using browser's selector in console;

Code: Select all

material-icons, .fa {
    font-family: 'Material Icons';
    ...
Could you please attach a screenshot showing the above css?

User avatar
aragorn
Posts: 2985
Joined: 29 Jun 2013, 12:38

16 May 2018, 07:18

Could you please make the following changes?

_icons.scss

Code: Select all

//line 1016
.material-icons {  /* please remove .fa class */
  ..
}
_mixins.scss

Code: Select all

//line 112
@mixin icon-override($icon) {
    &.fa {
        @include material-icon($icon);
    }
}
Then, please provide new theme css file using SASS command.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests