How to Use Font Awesome in Own CSS

Custom Font Awesome CSS

Use fa-exclamation instead and you can style it within a round shape that you will add a white border to.

.validation-tooltip-text:before {
  content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/
  font-family: fontAwesome;
  left: 10px;
  position: absolute;
  font-size: 20px;
  line-height:22px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  vertical-align:middle;
  top: 12px;
  color: white;
}

http://codepen.io/partypete25/pen/dMwwvz?editors=1100

Use Font Awesome Icons in CSS

You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.

Be sure to set position:relative on your actual text wrapper for the positioning to work.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

EDIT:

Font Awesome v5 uses other font names than older versions:

For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"

Note that you should set the same font-weight property, too (seems to be 900).

Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).

how to use font awesome in own css?

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

how to use font awesome icons in HTML

First you have to write this in the head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

Then whenever you want to use a font awesome, Just copy its HTML code and paste it where you want it to be. for example:

<i class="fa-solid fa-c"></i>

how to use fontAwesome icon from css

You can use like this. I have updated your code.

ul li {  display: inline-block;}
.right {  float: right;}
button:after {  content: "\f067";  font-family: FontAwesome;    font-style: normal;    font-weight: normal;    text-decoration: inherit;    display: inline-block;    vertical-align: middle;    margin-left: 5px;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="right">  <li><button>Note</button></li></ul><ul>  <li><a href="#"><i class="fa fa-user"></i></a></li>  <li><a href="#"><i class="fa fa-book"></i></a></li>  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li></ul>

Adding a font awesome icon to a css class

I am not 100% understand your need but i was try to make something make close of your need.

HTML:

<span class="icon fa-id-card-o"></span>

CSS:

 .icon {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        right: 0;
        color: red;
    }
    .icon:before {
        content: "\f2c3";
    }

.icon {    display: inline-block;    font: normal normal normal 14px/1 FontAwesome;    font-size: inherit;    text-rendering: auto;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    position: absolute;    right: 0;    color: red;}.icon:before {    content: "\f2c3";}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><span class="icon fa-id-card-o"></span>

How to use Font Awesome 6 icons?

To use the new free Font Awesome 6, you can again use the CDN (if that's your preference) like the following.

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

Then use icons in your HTML like the following.

<i class="fa-solid fa-house"></i>

How to use font awesome in HTML and CSS?

Use font-family:FontAwesome; instead of "Font Awesome 5 Free";