Is there a way to overlap two Font Awesome icons in such a way that it looks like the files icon with respect to the file icon? I don't want to stack the icons but rather have one cover like 50% of another. Thanks!
Why not just use CSS padding to offset one of the icons?
<span class="fa-stack fa-lg">
<i class="fa fa-file fa-stack-2x"></i>
<i class="fa fa-file fa-stack-2x" style="padding-left:15px;padding-top:15px;"></i>
</span>
Fiddle: http://jsfiddle.net/mwatz122/sx7fk582/
Related
I've been Googling around and can't seem to find any info on this.
In short, if I inline the colors for my Font Awesome icons, the colors change. If I put the same style selectors in my external stylesheet, no color change.
Here's the html:
<i class="fa fa-3x fa-facebook-official facebook-color"></i>
<i class="fa fa-3x fa-twitter-square twitter-color"></i>
<i class="fa fa-3x fa-linkedin-square linkedin-color"></i>
<i class="fa fa-3x fa-pinterest-square pinterest-color"></i>
<i class="fa fa-3x fa-envelope-square email-color"></i>
If I inline the color styles they change:
<style type="text/css">
.facebook-color {color:#3b5998}
.twitter-color {color:#55acee}
.linkedin-color {color:#0077b5}
.pinterest-color {color:#bd081c}
.email-color {color:black}
</style>
But if I put the exact same styles in my external stylesheet, there is no color change.
One note:
I grab Font Awesome with the CDN, maxcdn.bootstrapcdn.com
My sites at www.example.com and my static files like css and js are served from static.example.com. Is there some sort of cross domain issue that would cause the stylesheet not to work but explain why the inline works?
Im looking for a good font awesome icon I could use as a "Reset" button for my application.
Im currently using fa-undo which looks like this:
The problem is that I need it to have a circle around it as the other buttons in my system do ( these are standard in font awesome icons, nothing has been modified except the color )
An example of what i need (with the undo image):
Ive been reading through the list here for nearly an hour but cant think of a possible alternative. Any thoughts?
FA has some utility classes, one of which is fa-stack. You can stack fa-circle underneath fa-undo.
.fa-circle {
color: #008db8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-undo fa-stack-1x fa-inverse"></i>
</span>
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
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.
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.