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>
Related
Either side of a category title I want to display an icon. Here is my code:
<i class="fa fa-tree" style="color: #fcae03;"></i> Christmas Hampers <i class="fa fa-tree" style="color: #fcae03;"></i>
The code works, but how can I make only 'Christmas Hampers' appear on mouseover?
My knowledge of code is limited, would someone mind being quite specific if they can assist me please? Thanks! :)
If I understood you right you want to display only 2 tree icons and on mouseover (hover) to show 'Christmas Hampers'. Then try this code.
If you have some questions leave a comment :)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <!-- Probably you don't need to apply this line -->
<div class="christmas-hampers-wrapper">
<i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
<div class="christmas-hampers-wrapper inline-block">
<div class="christmas-hampers">Christmas Hampers</div>
</div>
<i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
</div>
<style>
.inline-block{
position: inherit;
display: inline-block;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper{
overflow: hidden;
display: inline-block;
width: 0px; height: 18px;
transition: .3s;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper > .christmas-hampers{
width: 127px;
}
.christmas-hampers-wrapper:hover > .christmas-hampers-wrapper{
display: inline-block;
width: 127px; height: 18px;
}
</style>
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>
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>
I want to create a rounded button in BS3 (a perfect circle), with a single fontawesome(4.0) icon in the center.
So far, I have the following code:
HTML:
<i class="fa fa-user"></i>
What would the CSS markup be to make this button a perfect circle?
you can do something like adding a class to add border radius
HTML:
<i class="fa fa-user"></i>
CSS:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
}
in case you wanted to change dimension you need to change the font size or padding accordingly
(Not cross-browser tested), but this is my answer:
.btn-circle {
width: 40px;
height: 40px;
line-height: 40px; /* adjust line height to align vertically*/
padding:0;
border-radius: 50%;
}
vertical center via the line-height property
padding becomes useless and must be reset
border-radius independant of the button size
Boostrap 3 has a component for exactly this. It's:
<span class="badge">100</span>
This is the best reference using font-awesome.
http://bootsnipp.com/snippets/featured/circle-button?
CSS:
.btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}
With Font Awesome ICONS, I used the following code to produce a round button/image with the color of your choice.
<code>
<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>
</code>
I had the same problem and came up with a very simple solution working for all (xs, sm, normal and lg) buttons more or less:
.btn-circle {
border-radius: 50%;
padding: 0.1em;
width:1.8em;
}
The difference between the btn-xs and -sm are only their padding. And this is not covered with this snippet. This snippet calculates the sizes based on the font-size only.
If you have downloaded these files locally then you can change following classes in bootstrap-social.css, just added border-radius: 50%;
.btn-social-icon.btn-lg{height:45px;width:45px;
padding-left:0;padding-right:0; border-radius: 50%; }
And here is teh HTML
<a class="btn btn-social-icon btn-lg btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">
<i class="fa fa-facebook sbg-facebook"></i>
</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">
<i class="fa fa-google-plus"></i>
</a>
It works smooth for me.
Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: http://fontawesome.io/examples/
.no-border {
border: none;
background-color: white;
outline: none;
cursor: pointer;
}
.color-no-focus {
color: grey;
}
.hover:hover {
color: blue;
}
.white {
color: white;
}
<button type="button" (click)="doSomething()"
class="hover color-no-focus no-border fa-stack fa-lg">
<i class="color-focus fa fa-circle fa-stack-2x"></i>
<span class="white fa-stack-1x">1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
To add a rounded border in any button the best way is to add the border-radius property. I belive this class is better because you can add-it at any button size. If you set the height and widht you will need to create a "rouding" class to each button size.
.btn-circle {
border-radius: 50%;
}
<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>