PButton with icon doesn't display the icon

Forum rules
Please note that response time for technical support is within 3-5 business days.
Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

06 May 2018, 01:32

Hi,

I am using a custom Ultima theme.

With the simple code like :

Code: Select all

<button type="button" label="Update" icon="ui-icon-update" pButton></button>
The output gets displayed as:

Image

What am I missing? Why doesn't the icon show up?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

08 May 2018, 12:42

Could you try this code? Is this shown?

Code: Select all

<i class="fa ui-icon-3d-rotation"></i>

qgzhiguo
Posts: 2
Joined: 06 Jun 2016, 06:24

10 May 2018, 04:10

have tried to <i class="fa ui-icon-3d-rotation"></i>,but it doesn't dispaly

Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

10 May 2018, 09:00

merve7 wrote:
08 May 2018, 12:42
Could you try this code? Is this shown?

Code: Select all

<i class="fa ui-icon-3d-rotation"></i>
Yes I tried it, doesn't seem to work:

Image

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

10 May 2018, 09:19

Please check your _icons.scss file in assets/sass/theme folder

Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

11 May 2018, 22:49

merve7 wrote:
10 May 2018, 09:19
Please check your _icons.scss file in assets/sass/theme folder
I don't have one.

The video or instructions about custom theme, doesn't mention anything about this.
https://www.primefaces.org/ultima-ng/#/documentation

All I did was compile the theme.scss & layout.scss for my custom theme & use them in my app, exactly as per the instructional video on that page.

Also, I doubt that that's an issue, as the icons do show up on the sidebar menu :

Image

What should I have? The `_icons.scss` file in that folder & added to the `angular-cli.json` file?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 May 2018, 16:09

I couldn't replicate it. Could you please attach your custom theme.scss file? Also, please check the following css after selecting <span class="ui-button-icon-left ui-clickable fa fa-fw fa ui-icon-3d-rotation"></span> using browser's selector in console;

Code: Select all

.material-icons, .fa {
    font-family: 'Material Icons';
    ...
Could you please attach a screenshot showing the above css?

Regards,

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 May 2018, 06:50

Also, do you have fontawesome*.css in your project? Exp; in .angular-cli.json;
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",

Could you please try this issue after removing fontawesome css?

OR

Could you please make the following changes?

_icons.scss

Code: Select all

//line 1016
.material-icons {  /* please remove .fa class */
  ..
}
_mixins.scss

Code: Select all

//line 112
@mixin icon-override($icon) {
    &.fa {
        @include material-icon($icon);
    }
}
Then, please provide new theme css file using SASS command.

Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

16 May 2018, 08:22

aragorn wrote:
16 May 2018, 06:50
Also, do you have fontawesome*.css in your project? Exp; in .angular-cli.json;
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",

Could you please try this issue after removing fontawesome css?

OR

Could you please make the following changes?

_icons.scss

Code: Select all

//line 1016
.material-icons {  /* please remove .fa class */
  ..
}
_mixins.scss

Code: Select all

//line 112
@mixin icon-override($icon) {
    &.fa {
        @include material-icon($icon);
    }
}
Then, please provide new theme css file using SASS command.
Legend!!

I tried the first option which is removing "../node_modules/font-awesome/css/font-awesome.min.css" from angular-cli.json
And the icon shows up for button :D

Thanks a lot

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 May 2018, 09:11

:D Glad to hear, thanks a lot for the update!

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests