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>
Related
I have a table like below with a custom toolbar icon in the top left.
This icon enables/disables the Filter Control.
It is setup like:
<div id="toolbar">
<button id="filterable" type="button" class="btn btn-secondary">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<table>
..
</table>
Is it possible to integrate this custom icon in the other icons on the right side?
E.g. after the pagination switch icon?
Its currently not possible with the bootstrap-table internal functions.
But there is a pull request which allows adding custom buttons.
I have an href link that triggers a download located within a button in my Angular component HTML. I can see both the button and the highlighted text link in my browser. However, when I click the link, nothing happens - in terms of triggering the download. This is what I have:
<button class="email-prompt-button" md-button>
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
</button>
Now, if I remove the button, and just have the a tag, it works:
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
How can I get this to works as link text within a button?
Why don't you shape your anchor tag shapes to look like a button by applying custom css
or
If you're using Bootstrap you can apply below classes:
btn btn-primary
Just like
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a [href]="fileUrl" download="file.txt" class="btn btn-primary btn-link">Download File</a>
I never had this kind of problem - and I don't know why..
some icons are missing and appearing blinking with "?/!"
what is happening?
Its a submit button. I have the same icon in another button - and it's ok there.
<button type="submit" id="submit"
class="btn btn-inv btn-lg" style="--h: #822584"
onclick="javascript:document.getElementById('classid').value='WAI-04'">
<i class="fa fa-thumbs-o-up"></i> SIGN!
</button>
any idea?
tks!!
If you are using the newest version of Font-Awesome, fa is no longer a valid class. It has been replaced with fas (solid), and fab (brands). For a thumbs up, you would use:
<i class="fas fa-thumbs-up"></i>
Here is the documentation if you want to learn more.
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?
For collapse/expand icons curretnly I have this in my Razor code:
<span class="glyphicon glyphicon-minus"></span>
So it has the "+" and "-" icons that my JS uses to toggle between them.
Now I want to use Up and Down arrows, how can I use FontAweosme up and down arrows?
I think this would work:
<span><i class="fa fa-angle-up"></i></span>
<span><i class="fa fa-angle-down"></i></span>
To replace "Glyph Icons" with "FontAwesome"
Visit: https://fortawesome.github.io/Font-Awesome/get-started/ and follow instructions.
Icon-font replacement and custom font glyphs
If you're looking for in depth control over custom fonts and glyph-class-names, see these answers: How to create custom font icons?