M_enuButton Fontawesome image not visible

Forum rules
Please note that response time for technical support is within 3-5 business days.
NicoDeluxe
Posts: 19
Joined: 06 Feb 2015, 10:40

25 Nov 2018, 21:13

Hi,

when i use a font awesome Icon, its not completly visible.

If i dont use a icon there is noting to see.

any idea?

Code: Select all

 <p:menuButton value="Optionen" icon="fa fa-save"  >
  <p:menuitem value="Speichern" ajax="false" icon="fa fa-save"  actionListener="#{adminDashboardView.persistUser}"/>
</p:menuButton>
https://imgur.com/a/ZlqHVOb

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

26 Nov 2018, 08:58

I couldn't replicate it. Which PF and Omega version are you using? Also, do you have any custom css?

NicoDeluxe
Posts: 19
Joined: 06 Feb 2015, 10:40

30 Nov 2018, 18:03

Hi, on both the latest PF 6.2 and Omega 1.1.4

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

03 Dec 2018, 09:14

latest PF 6.2 -> elite version(6.2.x) or only 6.2.

I still couldn't replicate it. Do you use custom css? Because, icon looks in your screenshot. You have an alignment issue with the icon.

d00d
Posts: 13
Joined: 18 Jun 2018, 11:18

12 Dec 2018, 13:02

I'm currently experiencing the same issue with PF 6.2.12 (Elite) with the new PrimeIcons. I'm using the Omega theme that comes with the library. When I switch to another theme, the icons appear. I tried to include the icons using an <i> or <span> tag:

Code: Select all

<i class="pi pi-check"></i>
My custom css looks like this:

Code: Select all

/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	
        margin-left: auto;
        margin-right: auto;
        
        
        
}

#dialog {
	
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    height: 50px;
    margin-top: -25px;
    background: yellow;

}

/* Style für ToggleButton auf der Chart-Seite muss manuell gesetzt werden, sonst wird er nicht angezeigt -> Fehler im Stylesheet thes PF-Themes*/
.ui-toggleswitch .ui-toggleswitch-slider {

    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border-radius: 30px;
    background-color: #72707080;

}

.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {

    background-color: green;
}

.ui-toggleswitch .ui-toggleswitch-slider::before {

    background-color: #ffffff;
    height: 1.250em;
    width: 1.250em;
    left: .25em;
    bottom: .25em;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;

}



.ui-selectmanymenu {
    min-width: 100% !important;
}

#animatedshapes_div {
	bgcolor: yellow;
}

/* Breite des Headers aus Bootstraps core.css überschreiben */
.container {

    width: 1300px;

}

#substituteSearch {
    height: 100%;
    width: auto;
}

td {
    height: 35px;
}



#page {
    
    background-position: center;
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: bottom left;
    min-width: 100%;
    min-height: 100%;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
body {
	
}
.wrapper {
	min-width: 600px;
	max-width: 1200px;
	margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
	height: 80px;
	
}


/* Middle
-----------------------------------------------------------------------------*/
#content {
    width: 70%;
    
}




Last edited by d00d on 12 Dec 2018, 13:52, edited 2 times in total.

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

12 Dec 2018, 13:08

Do you use custom css?

d00d
Posts: 13
Joined: 18 Jun 2018, 11:18

12 Dec 2018, 13:28

Yes, I added my custom css to my post but even after removing it, the icons are stll missing.

Edit: after reading the entire post, i seem to have a somehow different problem. My problem is with the integration of the new PrimeIcons, not the fontawesome icons. FA icons work just fine for me.

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

12 Dec 2018, 14:49

Please add the following line into your template page to use PrimeIcons;

Code: Select all

<!-- For Community Themes except 'Luna' and 'Nova' theme -->
<h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
I'll add it to documentation

Best Regards,

NicoDeluxe
Posts: 19
Joined: 06 Feb 2015, 10:40

08 Jan 2019, 19:39

Where should i get this css from?
<h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>


Its not found by intelliJ

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

11 Jan 2019, 13:49

Where should i get this css from?
<h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
- This css is in primefaces jar. Please see; https://github.com/primefaces/primeface ... primeicons

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest