I am trying to use stacked icons with fontawesome. I followed the example in Dave Gandy's excellent blog post.
http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/
Stacking works fine, but I am trying to align a stacked icon with a non-stacked icon (which is fa-5x). I cannot seem to make the size/alignment of a stacked icon match the size/alignment of a non-stacked icon.
See this codepen: http://codepen.io/rfiol/pen/YPQNaG
<i class="fa fa-calendar-o fa-5x"></i>
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
Try this
CSS
.calendar-text {
margin-top: .3em;
}
.calendar-text {
font-size:100%;
}
.col-md-1:nth-child(3) .calendar-text-half {
font-size:50%;
}
.col-md-1:nth-child(3) .fa-stack {
transform: scale(2,2);
}
.fa-stack {
font-size:2.5em;
}
.row {
width:100%;
height:100px;
display:block;
}
codepen http://codepen.io/anon/pen/jEwBNd
Related
I would like to have font awesome with charaters on it , but it fails to do that.Please help to understand whats going on wrong.
Output :
Code Tried :
<i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i>
<i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i>
<i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i>
You shouldn't use Font Awesome, as this will only output icons using CSS content, and you can't put any HTML markup 'inside' them.
The best thing would just be to use span tags, and style them using CSS.
http://jsfiddle.net/7uevq7pu/
HTML:
<span class="red">XL</span>
<span class="yellow">S</span>
<span class="green">XXL</span>
CSS:
span { border-radius:5px;padding:0 5px;text-align:center; }
.red { background:red; }
.yellow {background:yellow; }
.green { background:green; }
You can also define content as icon:
http://jsfiddle.net/tagliala/77re29ct/24/
.fa-a:before {
font-family: Arial; /* your font family here! */
font-weight: bold;
content: 'A';
}
<span class="fa fa-a"></span><br/>
I use Font-Awesome to show the icon. Now I want to add a number over the icon not beside it. How can I do this?
<i class="fa fa-calendar-o text-info">10</i>
If do like this, 10 will appear beside the icon. How can it be like hover the icon?
like zimorok answer, try this http://jsfiddle.net/Lm8vdg8u/2/
<div id="calendar">
<span class="day">10</span>
<i class="fa fa-calendar-o fa-3x text-info"></i>
</div>
the CSS
#calendar .day{
position: absolute;
z-index: -9999;
top: 30px;
left: 21px;
}
create another div stacking over the icon with z-index value higher than the icon
<div class="box">
<span class="high-z-index">10</span>
<i class="fa fa-calendar-o text-info"></i>
</div>
perhaps you can do it like this.
Create Span and hold counter and icon in it.this css even in mobile mode work correctly
.Notification{
color:white;
margin-right:30px;
}
.BellIcon
{
font-size:18pt;
}
.CounterNotification
{
color:red;
margin-right:-22px;
font-size:9pt;
font-weight:bold;
position:sticky
}
<span class="Notification">
<span class="CounterNotification">
10
</span>
<span class="fa fa-bell fa-lg BellIcon">
</span>
</span>
I couldn't find out how to add the pseudo :hover to the "Font-awesome" icons (fa-fa icons).
If somebody could help i would be greatly appreciative.
HTML:
<i class="fa fa-user fa-2x" style="margin-top:10px;"></i><br />
<i class="fa fa-level-up fa-2x" style="margin-top:10px;"></i>
CSS:
.overview, .tier {
color: black;
}
a:hover {
color: red;
}
The code you posted works, but it'll also color any text that contains. If you want to apply the color only when you hover the icon, put it on the class fa like you did with the a tag.
.fa:hover {
color: red
}
or if you want to specify it per icon:
.fa-level-up:hover {
color: blue;
}
In new FontAwesome 4.0.0 there is css styles for stacked items.
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-square-o:before {
content: "\f096";
}
I want to do it only without using nested span and i, just only with some css-classes
.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />
What is the simplest method to achieve the same result (using fa content classes ?)
Update:
or is something like the following possible ?
.myclass1:before { content: '<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>' }
<span class=".... myclass1" />
(edited)
This is not possible with fa-* classes, because there is no possibility to determine the order of stacked icons: in CSS class="foo bar" is the same as class="bar foo"
On the other side, you can define your own class and style it to achieve one chosen stacked icon - i.e you'll need one custom class per every pair (e.g fa-times stacked on fa-square).
In order to achieve this, use :before and :after selectors (and absolute positioning - little demo).
It also seems (tested using background property) that :after element is on top of :before if you use absolute positioning. In case that's not true, you cvan always use z-index to order those two elements manually.
About your update, if something like the following possible ?
.myclass1:before {
content:'<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>'
}
<span class=".... myclass1" />
It's not, as it is explained there : CSS content property: is it possible to insert HTML instead of Text?
If you want to keep control of the two stacked icon in a single HTML tag you can get it with something like that.
div{
display:flex;
justify-content: center;
position:relative;
}
i:before {
content: attr(icon-before); // "\f099";
position: absolute;
font-size: 1.5em;
margin:0.1em;
}
i:after {
content: attr(icon-after); // "\f096";
position: absolute;
font-size: 2.1em;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<!--https://stackoverflow.com/questions/22600464/html-special-characters-in-css-content-using-attr-->
<div><i class="fa" icon-before="" icon-after=""></i></div>
Is there is a simple way to stylize the Fontawesome icons background properly?
I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.
The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):
.icon-remove-sign {
padding: 0;
border-radius: 25px;
color: white;
background-color: red;
}
But it's not enough, we can see the red background at the top of the icon.
How would you do it ?
With fontawesome you can use stacked icons like this:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
It feels a little hacky, but I managed to get it working here:
http://jsfiddle.net/3FvxA/
display:block and giving it a height and width seems to be the secret.
Assuming that your HTML looks like this:
<div class="social-circle">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-pinterest-p" href="#"></a>
</div>
You can do something like:
.social-circle [class*="fa fa-"] {
width: 25px;
height: 25px;
color: white;
background-color: grey;
border-radius: 25px;
display: inline-block;
line-height: 25px;
margin: auto 3px;
font-size: 15px;
text-align: center;
}
.fa-facebook:hover {
background-color: #3B5A9B;
}
.fa-twitter:hover {
background-color: #4FC6F8;
}
.fa-pinterest-p:hover {
background-color: #CA2128;
}
See the example here : http://jsfiddle.net/k69xj2n8/