All geek questions in one place

How to use a font that is awesome in native CSS?

I use bootstrap and Font Awesome. In the custom css class I'm working on, I tried to include awesome fonts instead of using images. Here is my code before the awesome font.

.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. Icons are not displayed. 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 the fiddle of what I'm working on .

+6
source share
2 answers

you can do this using the alias :before or :after . more about this here http://astronautweb.co/snippet/font-awesome/

change your code to

 .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 other icons. You can also adjust the color and height of the icons. anyway here fiddle hope this helps

+27
source

The spirit of the Web font is to use the cache as much as possible, so you should use the CDN version between <head></head> instead of placing yourself:

 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Also, make sure you load your CSS AFTER the above line, or your custom CSS font will not work.

Link: Awesome Font Getting Started

+6
source

Source: https://habr.com/ru/post/951528/

More articles:


All Articles