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>
Related
I am trying to get the tooltip to work, which does btw, but no CSS is applied to the tooltip for reasons unknown. Since the whole site works fine in bootstrap itself (Wordpress plugin), I am scratching my head on this item.
Code is as following.
<a href="tel:<?php echo $phone; ?>" data-toggle="tooltip" title="<?php echo $phone; ?>" data-placement="bottom">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-phone fa-stack-1x"></i>
</span>
</a>
And the JS.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
The tooltip appears unstyled on the left side of my screen (while it should be below the item) unstyled. My bootstrap plugin is up to date and runs css version (v3.3.6), so I am wondering if there is an external sheet I need to get for the bootstrap tooltip.
It doesnt say: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
You must put bootstrap.min.js after jquery-ui.js!
Its all.
<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery-ui.js"></script>
<script type="text/javascript" src="path/bootstrap.min.js"></script>
Make sure that bootstrap.js or bootstrap.min.js is is included in your project.
Would you please try the following
Please insert this code of javascript
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
And in Html file add this html part
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Sometimes you just have to call it and find a different solution. I couldnt understand why it wouldn't appear, (so indeed, it may have not been in that bootstrap version) so instead, i wrote my own tooltip with a bit of simple css. It's not the solution I wanted, but it solved my problem in the end.
Intrested?
.tooltip {
position: relative;
display: inline-block;
font-size: 16px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
font-size: 12px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
And the modified code
<a href="tel:<?php echo $phone; ?>" class="tooltip">
<span class="tooltiptext"><?php echo $phone; ?></span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-phone fa-stack-1x"></i>
</span>
</a>
Try using data-original-title instead of title
Also Include the "bootstrap-tooltip.js" in your HTML/Code
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
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 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 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
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>