Menu
I'm using bootstrap and Font Awesome. In a custom css class I'm working on I tried to include Font Awesome icons instead of using images. Here is my code before Font Awesome.
.data .close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.next {
right: 0;
float: right;
}
.next:hover {
background: url(../img/next.png) right 48% no-repeat;
}
Here is my code using Font Awesome, which obviously doesn't work. The icons don't show. Any idea what I'm doing wrong?
.data .close {
display: block;
float: right;
width: 30px;
height: 30px;
font-family: FontAwesome
content: "\f00d";
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.next {
right: 0;
float: right;
}
.next:hover {
font-family: FontAwesome
content: "\f054";
}
html header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>
....
....
here is a fiddle of what i'm working on.
905
you can do so by using the :before or :after pseudo. read more about it here http://astronautweb.co/snippet/font-awesome/
change your code to this
.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
text-decoration: none;
}
.lb-prev:before {
font-family: FontAwesome;
content: "\f053";
font-size: 30px;
}
do the same for the other icons. you might want to adjust the color and height of the icons too. anyway here is the fiddle hope this helps
67
The spirit of Web font is to use cache as much as possible, therefore you should use CDN version between <head></head> instead of hosting yourself:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Also, make sure you loaded your CSS AFTER the above line, or your custom font CSS won't work.
Reference: Font Awesome Get Started
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
