My problem is the next:
I have a p:commanButton like this:
<p:commandButton icon="fa fa-reply fa-2x"/>
The problem is that the content (fa-reply) grows but the size of the button doesn't.
Which is the problem?
When I do: <p:commandButton icon="fa fa-reply" styleClass="fa-2x"/> the size of the button grows, but the content doesn't show correctly.
I think, simple work-arround would be to use p:commandLink with manual <i class="fa fa-reply fa-2x"></i> tag instead of p:commandButton, as following:
<p:commandLink>
<i class="fa fa-reply fa-2x"></i>
</p:commandLink>
And if you want to use text as well, then:
<p:commandLink>
<i class="fa fa-reply fa-2x"> Reply</i>
</p:commandLink>
Otherwise, you will require to add compatencies for the different sizes of the icons (fa-xx) on your p:commandButton using custom CSS classes.
You can simply add style="font-size: 2rem" to your button:
<p:commandButton icon="fa fa-reply" style="font-size: 2rem"/>
This will set the font size of both the icon and the button text.
Example from the showcase where I applied this to the button in the middle:
I suggest to create a class though, so you can reuse this style on buttons.
See also:
How do I override default PrimeFaces CSS with custom styles?
Related
I'm testing the JAWS screen reader on a table having the following markup in its cells:
<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>
I've noticed that the screen reader can't "enter" the above cell (due to the aria-hidden), so I removed it:
<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>
Now it can enter the cell but doesn't read any text.
Any way to put some text accessible only to the screen reader and not visible on the UI?
<center>
<i class="fa fa-check fa-1"
title="MyTitle"
style="color:green"
aria-label="read me"
role="img">
</i>
</center>
Notice how I added role="img", this instructs the screen reader to treat this like an image and so it will read the aria-label.
Without it some screen readers will ignore aria-label attributes on certain elements as they aren't "semantically correct".
The alternative is to leave the aria-hidden on the icon and add some visually hidden text that is for screen reader users.
I have a question. Do any of you know why when a try to add an additional class to a fontawesome icon it doesn't work?? Looks like this,
<i class="fas fa-angle-up"></i>.
What I want to do is to add an additional class to this item just like .hide.
It should work this way
<i class="fas fa-angle-up hide></i>
Of course, if it is possible to put additional classes to a fontawesome icon, it is usually like this:
<i class="fas fa-angle-up"></i>
And you only add the additional classes you need, these must be previously created:
<i class="fas fa-angle-up hide"></i>
Am trying to use a font awesome icon as a button to implement the like feature in my web application, using bootstrap 4 and font awesome
<button class="icon-button" onclick="actOnStory(event);"data-story-id="<%= story._id %>">
<i class="far fa-heart"></i>
</button>
my current code results in the icon being inside the button and not being the button itself
No need to wrap <i> with <button>, since onclick event can be called on icon as well. Just make it
<i class="far fa-heart" onclick="actOnStory(event);" data-story-id="<%= story._id %>"></i>
I'm trying to implemented a button just like the one demontrated in the example page of fontawesome, whose code is:
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>
Version 4.3.0
</a>
It works but only when the second line is no more longer than the first one.
So what causes the weird phenomenon and how to fix it?
Thanks.
Edit:
There is a running demo over here.
This is a single page app and the broken btns is over the second scene.
The problem comes with white-space: nowrap;. Bootstrap sets it on .btn. In most cases the text in buttons is on one line. In your case it must be on two. So, add a custom class to the button and overwrite it, like this:
.btn-custom {
white-space: normal;
}
I've been given an assignment to recreate a form from a given image. I'm using bootstrap 3, but can't recreate the following images. At the moment I'm using a label with a rounded radius but it doesn't look the same. Can someone point out the right component I should be using?
You could use fontawesomes stacked icons concept. But this would make the icon bigger that yours. Otherwise, as you pointed out by your self, you could use a badge or label and restyle it the way you need it, by modifying the border-radius or anything else, which doesn't fit your needs...
<!-- just some example code -->
Deposit
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
Priority Payment? <span class="label label-default" style="border-radius:100%">?</span>
Deporit <span class="badge">+</span>
PS: Note that you would have to override all border-radius-prefixes which is better done in a css class (as always). The inline css here is of course just for the sake of simplicity