Ultima and Font Awesome

fairpoint
Posts: 3
Joined: 04 Jul 2016, 10:29

27 Oct 2016, 09:49

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.

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

09 Nov 2016, 10:59

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.

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

09 Nov 2016, 13:53

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;
Image

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

17 Nov 2016, 03:20

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

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

17 Nov 2016, 08:27

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
Posts: 59
Joined: 18 Sep 2016, 18:30

17 Nov 2016, 16:55

where should I add the code

.fa-fontAwesome.fa, .fa-fontAwesome .fa {
font-family: 'FontAwesome';
}
Last edited by sk77 on 18 Nov 2016, 02:36, edited 1 time in total.

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

17 Nov 2016, 17:19

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

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

18 Nov 2016, 09:23

Hi,

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

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

18 Nov 2016, 14:04

Or please add it into your layout.css file.

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

18 Nov 2016, 22:29

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

Image

paginator
Image

datatable

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest