Ultima and Font Awesome

[fairpoint]

Hey guys,

is it somehow possible to use Ultima and Font Awesome (using PrimeNG), at the moment in the theme-XXXX.css I see:

Code: Select all

 body .fa {
    font-family: 'Material Icons';
    ....
}

I cannot think of a way to use FA in other parts of our app with the .fa selector hijacked like that

Thanks for any ideas.

[DarthMaul]

Hi,

We override the font-awesome in Ultima you can delete these overrides after this there are few steps.

1- You need to add font-awesome to the project.
2- Arrange all html files according to this.
3- When necessary you should change some of special css from _theme.scss

But we are not recommending this changes.

[mert.sincan]

Another solution;

- Add font-awesome css to project; http://fontawesome.io/get-started/
- please make the following changes in _icon.scss

Code: Select all

 /* line 1 */
:not([class*="fa-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("chevron_left");}
    &.fa-chevron-circle-right {@include icon-override("chevron_right");}
    &.fa-chevron-circle-down {@include icon-override("chevron_right"); @include rotate(90deg);}
    &.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"); }
}

...

.fa-fontAwesome.fa, .fa-fontAwesome .fa {
  font-family: 'FontAwesome';
}

Exp;

Code: Select all

<button type="button" label="Material Home Icon" icon="fa-home" pButton></button>
<button type="button" label="FontAwesome Home Icon" icon="fa-fontAwesome fa-home" pButton></button>

Screenshot;

[sk77]

In our project, we are using icons of social networking sites.. since they are not available with Ultima.. we need to use font-awesome.. we are not using scss files, we use font and css files.. can you please help us on how to use font-awesome with Ultima (using css files)

Thank you
SK

[mert.sincan]

Please try for social icons;

- Add font-awesome css to project; http://fontawesome.io/get-started/
- Please add;

Code: Select all

.fa-fontAwesome.fa, .fa-fontAwesome .fa {
  font-family: 'FontAwesome';
}

- Then, please use fa-fontAwesome class with your icons. Exp; icon="fa-fontAwesome fa-facebook"

[sk77]

where should I add the code

.fa-fontAwesome.fa, .fa-fontAwesome .fa {
font-family: 'FontAwesome';
}

[sk77]

it would be great if you have any instructions on how to use font-awesome and ultima together..

[DarthMaul]

Hi,

In _theme.scss there is .fa class which contains font-family:'Material Icons' thats where you should add it.

[mert.sincan]

Or please add it into your layout.css file.

[sk77]

This is how I have added code, I am able to display social networking icons.. but I see conflicts with Ultima and font-awesome themes

.fa-fontAwesome.fa, .fa-fontAwesome .fa {
font-family: 'FontAwesome';
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/MaterialIcons-Regular.eot");
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url("../fonts/MaterialIcons-Regular.woff2") format("woff2"), url("../fonts/MaterialIcons-Regular.woff") format("woff"), url("../fonts/MaterialIcons-Regular.ttf") format("truetype"); }

dropdown



paginator


datatable

some icons in datatable - sort,chevron-circle-right, chevron-circle-down are displaying as squares..