Icon cutoff problem on button and commandbutton mobile

[Dsleeper]

Hi!

I've just migrated from Sentinel to Spark on http://www.mylog.no

Everything seems to be working fine except for some icons that have their "top" cut off on mobile devices. Specifically on my Samsung Galaxy S5. If you load the frontpage and scroll down until you find some buttons with icons marked "Les mer". On my S5 the top part of these icons are cut off:
fa-file-o
fa-futbol-o

There are probably more icons with these problems... However I can see that all icons are working in the Spark demo, but they all seem to be aligned differently than on my installation.

Is this an error on my part in the configuration of the theme or is this a known issue with Spark?

Running on PF 5.3.7 and Spark 2.0.1. Font Awesome is enabled in web.xml since I could not get the "fa spin" icons to work without it.

[mert.sincan]

Please remove FontAwesome setting in your web.xml and use spark-layout/css/font-awesome.css and spark-layout/fonts/FontAwesome.otf, fontawesome-webfont.* in spark Layout.

[Dsleeper]

I will try that and post an update here afterwards.

Hoping that fa spin classes will work this way too!

[mert.sincan]

Please see this issue about Font Awesome effects (fa-spin);
http://forum.primefaces.org/viewtopic.php?f=27&t=43599

Spark uses FontAwesome 4.3.0. Please upgrade the new FontAwesome version for using fa-spin in Spark.

[Dsleeper]

Sorry, but isn't PF 5.3.7 already running Font Awesome version 4.5.0 if enabled via context param in web.xml? Ref: https://github.com/primefaces/primefaces/issues/781

What are the pros and cons of using the version already embedded with PF 5.3.7?

I mean: Everything is working as expected except the cutoff issue. If I do upgrade the css, otf etc directly from the latest font-awesome 4.5.0 won't that create the same result as I already have with the context param included version? I read the the forum post you linked to, but I didn't get any wiser

To be clear: I am not including the spark font-awesome.css in my template as of now.

[mert.sincan]

We suggest to use FA of Layouts. In some cases, PF-FontAwesome and Layouts-FontAwesome can cause confusion. Maybe, your issue is related to this confusion.
Can you please try the FA of Layouts to be sure?

[mert.sincan]

I deleted my last post. I replicated this issue. You must use FA of Layouts for this issue. PF-FontAwesome causes confusion for layouts like your issue.

Or

please add this css;

Code: Select all

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa, 
.ui-icon.fa {
    background-image: none;
    text-indent: 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    text-indent: 0px;
}

[Dsleeper]

Thank you! I will try the CSS solution and post here when I have tested it.

[mert.sincan]

I am waiting for your post, thanks

[Dsleeper]

Your CSS fix is working! Thank you!

For other interested parties:
1. I am running Spark 2.0.1
2. I have not included the Spark layout Font Awesome css via

Code: Select all

<h:outputStylesheet name="css/font-awesome.css" library="spark-layout" />

3. I have enabled Font Awesome for Primefaces 5.3.7 via this context parameter in web.xml

Code: Select all

<context-param>
		<param-name>primefaces.FONT_AWESOME</param-name>
		<param-value>true</param-value>
	</context-param>

The CSS fix that aragorn has provided is fixing my issues with the cutoff problems.