Is there a way to vertically align text stacked on top of a Font Awesome icon? I'd like to move the #1 up in this stack so that it is centered in the cup of the trophy icon. I tried adding bottom-margin and bottom-padding in the span that encapsulates the #1, but neither one did the trick. Is there an easy way to do what I'm trying to accomplish, or do I need to go another route?
<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:red;">
<span style="font-size:35px;">
#1
</span>
</span>
</span>
http://jsfiddle.net/wc2jP/
Add display:block; margin-top:-20px; to the #1 <span> tag like so:
http://jsfiddle.net/wc2jP/1/
A couple of months after you asked this question, the team at Font Awesome blogged about this with examples using their calendar, comment, and file icons: Stacking Text and Icons
you can use line-height property as well with display:inline-block.
span{
vertical-align:top;
display:inline-block;
line-height:1.6em;
}
Here is the Working Demo.
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size?
<i class="fa fa-heart fa-2x"></i>
And here's how they look:
CSS:
hover-info .fa .fa-heart {
font-size: 2em;
}
This is working in my browser:
.fa-heart {
font-size: 4em;
}
Maybe your reference to 'hover-info' is causing the issue.
NOTE: your 'css' file has to be loaded after fontawesome.
Another option if you don´t want to define a css class, is this way:
<font size="8"> <i class="fa fa-facebook"></i> </font>
Then it only remains to change the number of the font tag.
In my case this worked very well, I hope that in yours too.
Regards
I would like to make an icon within a div tag clickable. See code below:
<div class="wd_home_box">
<div class="fa fa-get-pocket"> </div>
Leadership</div>
Ideally, I would like the whole box to be clickable, but I'll settle for just the icon and text obviously. Any suggestions are appreciated!
I think you are looking for something like this? https://jsfiddle.net/0j1me71m/1/
<div class="wd_home_box">
<div><i class="fa fa-get-pocket"></i> Leadership</div>
</div>
If I want to minimize icon size, how can I make icon small when using bootstrap?
This is demo http://jsfiddle.net/AqUBu/
I'd like to minimize the size of this human icon.
<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>
If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small>
It works perfectly with Bootstrap 3.
Glyphicons and other icons can be re-sized precisely with the CSS property font-size:
You know... being glyphs and all.
You can use class="btn btn-xs"
Reference: https://getbootstrap.com/components/
From http://getbootstrap.com/css/#small-text
Small text
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading
elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of
any <small>.
Try:
<span class='badge badge-success small'>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
</span>
None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:
<button class="btn btn-sm btn-secondary ">
<i class="fa fa-pencil"></i>
</button>
Bootstrap 4 button documentation (#Sizes)
If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.
Consider the following jQuery Mobile markup:
<div data-role="collapsible">
<h3 style="white-space:normal">This heading is not
wrapping even after "white-space:normal" style is applied</h3>
<p>This content is wrapping without any problems</p>
</div>
The heading should wrap due to the style "white-space:normal", but it is not happening.
Why this is so?
What can I do to wrap the heading?
As of version 1.4.3, you now need to do something like this in your CSS:
h3 .ui-btn{white-space:normal !important;}
I had this issue, and it was driving me crazy because all the examples online were for older versions of jQuery Mobile, and apparently the good people at jQuery Mobile changed up their class names over time.
...............................................................
Used to this
word-break:break-all
as like this
h3{
word-break:break-all;
}
The actual text of the h3, after jquerymobile had its ways, is not directly inside the h3 tag. The answer is to use the css on the class ui-btn-text. So if you want to implement it for buttons made from h3 tags:
<style>
h3 .ui-btn-text{ white-space:normal; word-break:break-all; }
</style>
The h3 tag's html after jquerymobile had loaded looks something like this:
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" ...>
<span class="ui-btn-inner">
<span class="ui-btn-text">The actual h3 text
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>
</span>
</a>
</h3>