將字體真棒圖標添加到 css 類

Question

我有一個帶有不同大小小部件的儀表板。 我需要創建一個在小部件周圍添加邊框的單個類，並在現有內容頂部的小部件右上角添加一個很棒的字體圖標。

我如何用一個 css 類做到這一點？

Answer 1

我不是 100% 了解您的需求，但我試圖做出一些接近您的需求的東西。

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>

另一個帶有固定 div 的示例，例如小部件的

實時取景

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>

Answer 2

嗯，我明白這樣的事情......

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;
}

我希望能幫到你。

Answer 3

當直接在按鈕內或任何你想要的地方使用字體真棒icons你可以像下面一樣使用

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

按鈕的示例如下

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

但是，當使用額外的css時，您可以使用span 。 下面的示例有一個額外的css ' your-css '。

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