Hi,
Could you integrate Ultima with Font Awesome. There are more better icons than in Ultima now.
Regards,
Joachim Rupik
Font Awesome - icons
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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;
Then, please add "font-awesome": "4.7.0" dependence to package.json and the following styles into .angular-cli.json;
You can use fontawesome icons with .fontawesome class after making the above changes.
Exp;
Best Regards,
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';
}
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"
],
Exp;
Code: Select all
<i class="fa fa-check"></i> //Material check icon
<i class="fontawesome fa fa-check"></i> // Fontawesome check icon
Github Profile: https://github.com/mertsincan
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
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
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
- I couldn't replicate it.Exp; <button pButton type="button" icon="ui-icon-sort"></button>Standard icons for buttons does not show, I mean icon="ui-icon-sort" displays text "sort" instead icon on a button.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please make the following changes?
_icons.scss
_mixins.scss
Then, please provide new theme css file using SASS command.
_icons.scss
Code: Select all
//line 1016
.material-icons { /* please remove .fa class */
..
}
Code: Select all
//line 112
@mixin icon-override($icon) {
&.fa {
@include material-icon($icon);
}
}
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You're welcome!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 22 guests