Page 1 of 2
PButton with icon doesn't display the icon
Posted: 06 May 2018, 01:32
by Aseem
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:
What am I missing? Why doesn't the icon show up?
Re: PButton with icon doesn't display the icon
Posted: 08 May 2018, 12:42
by merve7
Could you try this code? Is this shown?
Code: Select all
<i class="fa ui-icon-3d-rotation"></i>
Re: PButton with icon doesn't display the icon
Posted: 10 May 2018, 04:10
by qgzhiguo
have tried to <i class="fa ui-icon-3d-rotation"></i>,but it doesn't dispaly
Re: PButton with icon doesn't display the icon
Posted: 10 May 2018, 09:00
by Aseem
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:
Re: PButton with icon doesn't display the icon
Posted: 10 May 2018, 09:19
by merve7
Please check your _icons.scss file in assets/sass/theme folder
Re: PButton with icon doesn't display the icon
Posted: 11 May 2018, 22:49
by Aseem
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 :
What should I have? The `_icons.scss` file in that folder & added to the `angular-cli.json` file?
Re: PButton with icon doesn't display the icon
Posted: 15 May 2018, 16:09
by mert.sincan
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,
Re: PButton with icon doesn't display the icon
Posted: 16 May 2018, 06:50
by mert.sincan
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.
Re: PButton with icon doesn't display the icon
Posted: 16 May 2018, 08:22
by Aseem
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
Thanks a lot
Re: PButton with icon doesn't display the icon
Posted: 16 May 2018, 09:11
by mert.sincan
Glad to hear, thanks a lot for the update!