Adding a font awesome icon to a css class

Question

I have a dashboard with different sized widgets. I need to make a single class that adds a border around the widget, and also adds a font awesome icon to the top right of the widget on top of the existing content.

How i do this with one css class?

Make a images or any link or sniper for getting a best answer — MD Ashik, Nov 10 '16 at 03:02
YOur Question only text or description this's not a perfect way to do a Q so please make some code which you try and make by your own . — MD Ashik, Nov 10 '16 at 03:13
@MichaelChristopherMartire What have you tried? Stack Overflow is **not** a free coding service. Search and research, **try to write some code**. If you then have trouble, you can come back here and ask a proper question, providing a [**Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve). — Ricky Ruiz, Nov 10 '16 at 03:30
Please check this link:-http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css — Razia sultana, Nov 10 '16 at 03:49

MD Ashik · Accepted Answer · 2016-11-10T03:31:06.910

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>

ANOTHER EXAMPLE with a fixed div like a widget's

LIve view

HTML:

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

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;
    color: red;
    float: right;
}
.icon:before {
    content: "\f2c3";
}
.element.style {
}
.box {
    background: green;
    margin: 100px;
    display: block;
    width: 70%;
    height: 300px;
    }

.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;
    color: red;
    float: right;
}
.icon:before {
    content: "\f2c3";
}
.element.style {
}
.box {
    background: green;
    margin: 100px;
    display: block;
    width: 70%;
    height: 300px;
    }

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

score 6 · Answer 2 · answered Nov 10 '16 at 03:22

Well, i'am understand something like this...

HTML

<div class="box">
  <div class="box-icon"></div>
</div>

CSS

.box {
   box-shadow: 0px 0px 10px #000;
   height: 5em;
   width: 5em;
}
.box-icon {
   position: relative;
}
.box-icon:before {
  content: "\f2da";
  display: inline-block;
  font-family: FontAwesome;
  position: absolute;
  right: -1.5em;
}

I hope can i a help you.

score 0 · Answer 3 · answered Mar 04 '20 at 07:26

When using font awesome icons directly inside a button or wherever you want you can use like below

<i class="fab fa-rebel"></i>

an example for a button is below

 <button class="button">
    <i class="fab fa-rebel"></i>
 </button>

but, when use an additional css with this, you can use span. the example below have an additional css 'your-css'.

<button class="button">
     <span class="your-css fab fa-rebel"></span>
 </button>

Adding a font awesome icon to a css class

3 Answers3