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.
Related
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 want to use this bootstrap notification menu
http://www.bootply.com/oasBuRC8Kz#
but need to include the number of notifications to the upper right of the glyphicon. I read through the documentation for glyphicon. I didn't see that option. I want something similar to the option that linkein has with their menu options. Thanks,
You can see the documentation of glyphicon in :
http://getbootstrap.com/components/
And if you need the number in notifications go to badges:
http://getbootstrap.com/components/#badges
Just combine both to get the result:
https://jsfiddle.net/0rr2s5t5/
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="badge">4</span>
</button>
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 followed all of the instructions for the foundation-icons-sass-rails gem including importing and precompiling the gem's assets. But, for some reason the icons are not showing on my foundation button. I will show you the line of code. What exactly am I missing here?
<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown [radius] zurb-button-custom"><i class="fi-[eye]"></i>Profile</button><br>
The icon for eye is:
<i class="fi-eye"></i>
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview