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/>
Related
I have a problem, changing the text color of my font-awesome social icons. Right now it's transparent which looks weird because of my footer background-color. Is there any way that I can change it to white?
Have tried with color: (and a color code) but that only changes the color around the text.
It looks like this:
My html code:
<div class="social-content">
<i class="fa fa-facebook-square fa-3x fb-btn"></i>
<i class="fa fa-twitter-square fa-3x twit-btn"></i>
<i class="fa fa-youtube-square fa-3x you-btn"></i>
<i class="fa fa-google-plus-square fa-3x gog-btn"></i>
<i class="fa fa-instagram fa-3x ins-btn"></i>
<i class="fa fa-pencil-square fa-3x pen-btn"></i>
</div>
My css code:
.fb-btn {
color: #2D609B;
}
.twit-btn {
color: #00C3F3;
}
.you-btn {
color: #CC181E;
}
.gog-btn {
color: #F6861F;
}
.ins-btn {
color: #517FA6;
}
.pen-btn {
color: #CC1D1F;
}
Not sure if i'm using the right icons etc fa-facebook-square and if it locked to be transparent.
Try to add a white background. You can achieve this with a Font Awesome icon stack. To do this, use a fa-square and make the color: white; and put this underneath the square social media icon.
HTML
<span class="fa-stack fa-2x social social-fb">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-facebook-square fa-stack-2x "></i>
</span>
CSS
/* Just to create some contrast */
body {
background: #DA4A10;
margin: 10px;
}
/* Color of the social media icon */
.social-fb { color: #2D609B; }
/* Definition of the white background */
.white-bg {
color: white;
font-size: 54px;
}
Check my jsFiddle to see the code in action.
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
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>