How to replace the icons with fontawesome icons ?

Post Reply
manishbjain
Posts: 8
Joined: 04 Dec 2018, 03:42

29 Dec 2018, 04:54

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
Posts: 467
Joined: 12 Sep 2017, 10:44

07 Jan 2019, 13:50

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>

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest