Font Awesome - icons

Post Reply
jrupik
Posts: 14
Joined: 22 May 2017, 12:24
Location: Warsaw, Poland

11 May 2018, 08:51

Hi,
Could you integrate Ultima with Font Awesome. There are more better icons than in Ultima now.

Regards,
Joachim Rupik

jrupik
Posts: 14
Joined: 22 May 2017, 12:24
Location: Warsaw, Poland

15 May 2018, 09:58

Thank you PrimeTek for your response.

Regards,
Joachim Rupik

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

15 May 2018, 14:29

Sorry for the delayed response. Ultima, Barcelona and Serenity are material layouts. Therefore, we override some icon classes in Ultima. Please see _core.scss file in Ultima. If you want to use fontawesome icons, please make the following changes in _icons.scss;

Code: Select all

/* Line 1 */
*:not(.fontawesome) {
  &.fa-sort {@include icon-override("sort");}
  &.fa-sort-asc {@include icon-override("keyboard_arrow_up");}
  &.fa-sort-desc {@include icon-override("keyboard_arrow_down");}
  &.fa-angle-up {@include icon-override("play_arrow"); @include rotate(-90deg);}
  &.fa-angle-double-up { @include icon-override("skip_next"); @include rotate(-90deg);}
  &.fa-angle-down {@include icon-override("play_arrow"); @include rotate(90deg);}
  &.fa-angle-double-down {@include icon-override("skip_previous"); @include rotate(-90deg);}
  &.fa-angle-right {@include icon-override("play_arrow");}
  &.fa-angle-double-right {@include icon-override("fast_forward");}
  &.fa-angle-left {@include icon-override("play_arrow"); @include rotate(180deg);}
  &.fa-angle-double-left {@include icon-override("fast_rewind");}
  &.fa-check {@include icon-override("check");}
  &.fa-caret-up {@include icon-override("keyboard_arrow_up");}
  &.fa-caret-down {@include icon-override("keyboard_arrow_down");}
  &.fa-caret-right {@include icon-override("keyboard_arrow_right");}
  &.fa-caret-left {@include icon-override("keyboard_arrow_left");}
  &.fa-search {@include icon-override("search");}
  &.fa-close {@include icon-override("close");}
  &.fa-minus {@include icon-override("remove");}
  &.fa-plus {@include icon-override("add");}
  &.fa-check {@include icon-override("check");}
  &.fa-info-circle {@include icon-override("info");}
  &.fa-upload  {@include icon-override("file_upload");}
  &.fa-chevron-circle-left {@include icon-override("keyboard_arrow_left");}
  &.fa-chevron-circle-right {@include icon-override("keyboard_arrow_right");}
  &.fa-chevron-circle-down {@include icon-override("keyboard_arrow_down");}
  &.fa-chevron-circle-up {@include icon-override("keyboard_arrow_up");}
  &.fa-home {@include icon-override("home");}
  &.fa-chevron-right {@include icon-override("chevron_right");}
  &.fa-chevron-left {@include icon-override("chevron_left");}
  &.fa-circle-o{@include icon-override("radio_button_unchecked");}
  &.fa-dot-circle-o{@include icon-override("radio_button_checked");}
  &.fa-arrow-circle-right {@include icon-override("play_circle_outline"); }
  &.fa-arrow-circle-left {@include icon-override("play_circle_outline"); @include rotate(180deg);}
  &.fa-calendar { @include icon-override("date_range"); }
  &.fa-arrow-down{ @include icon-override("arrow_downward"); } 
  &.fa-arrow-up { @include icon-override("arrow_upward"); }
}

....

/* Line 1017 */
.material-icons, .fa:not(.fontawesome) {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
Then, please add "font-awesome": "4.7.0" dependence to package.json and the following styles into .angular-cli.json;

Code: Select all

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/fullcalendar/dist/fullcalendar.min.css",
        "../node_modules/quill/dist/quill.snow.css",
        "../node_modules/font-awesome/css/font-awesome.min.css", // Added this line
        "styles.scss"
      ],
You can use fontawesome icons with .fontawesome class after making the above changes.
Exp;

Code: Select all

<i class="fa fa-check"></i> //Material check icon

<i class="fontawesome fa fa-check"></i> // Fontawesome check icon
Best Regards,

jrupik
Posts: 14
Joined: 22 May 2017, 12:24
Location: Warsaw, Poland

15 May 2018, 15:20

Thank you,
That solution allows to use both icons, but ...
Standard icons for buttons does not show, I mean icon="ui-icon-sort" displays text "sort" instead icon on a button.
Is it possible to use standard icons class names. It should use material icons as usual if I understood you correctly.

Regards,
Joachim Rupik

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

15 May 2018, 15:54

Standard icons for buttons does not show, I mean icon="ui-icon-sort" displays text "sort" instead icon on a button.
- I couldn't replicate it.Exp; <button pButton type="button" icon="ui-icon-sort"></button>

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

16 May 2018, 07:16

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.

jrupik
Posts: 14
Joined: 22 May 2017, 12:24
Location: Warsaw, Poland

16 May 2018, 09:10

Thank you, now it works!
Regards,
Joachim Rupik

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

16 May 2018, 09:11

You're welcome!

Best Regards,

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest