How to replace the icons with fontawesome icons ?

[manishbjain]

I want to replace all the icons in the menu and top bar with icons from font awesome as I dont find the icons I want in the theme . How do I do that ?

[merve7]

We recommend using material icons because Ultima is designed with material design guide but you can use font-awesome with the below steps;
1. add your package.json

Code: Select all

"font-awesome": "4.7.0"

2. add font awesome stylesheet in angular.json file

Code: Select all

            "styles": [
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
                //other styles
              "src/styles.scss"
            ],

3. for topbar remove material class and add font-awesome like;

Code: Select all

remove <i class="material-icons">more_vert</i>
add <i class="fa fa-cog"></i>

4. for menu; firstly change icon in this.model;

Code: Select all

            {label: 'Dashboard', icon: 'fa fa-fw fa-home', routerLink: ['/']}, 		//with material => icon: 'dashboard'
            {
                label: 'Themes', icon: 'fa fa-fw fa-cog', badge: '6',
                items: [
                //
                ]
            },

also change <i> class in 151th line and 160th line in app-submenu component

Code: Select all

<i *ngIf="child.icon" [ngClass]="child.icon"></i>			//with material => <i *ngIf="child.icon" class="material-icons">{{child.icon}}</i>