将字体真棒图标添加到 css 类

Question

我有一个包含不同大小的小部件的仪表板。我需要制作一个类，在小部件周围添加边框，并在现有内容顶部的小部件右上角添加一个超棒的字体图标。

我如何用一个 css 类做到这一点？

原文由 Michael Christopher Martire 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 MD Ashik 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

我希望我能帮助你。

原文由 Alex Andrei Bastida Flores 发布，翻译遵循 CC BY-SA 3.0 许可协议