具有特定值的font-awesome图标

Question

有没有办法给出一个图标（来自font-awesome）特定值？ 我知道有一种方法可以让图标更大，但有没有办法让它们更小？如果有的话，还有办法将这个图标放在你想要的位置吗？

1是插入font-awesome图标时获得的，而2是我尝试实现的。

我的代码如下所示：

<h4> Wijzigingen <i class="fa fa-circle" aria-hidden="true"> </i> </h4>

CSS样式附带了字体很棒的文件：

.fa {
    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;
}

Answer 1

我想你想要减少font-size并将其提升一点。

h4 {
    position: relative;
}

h4 .fa {
    font-size: 12px;
    position: absolute;
    right: -20px;
    top: -3px;
}

为了提升图标，你可以像我在这里一样使用绝对位置，或者你可以保留display inline block并使用margin-top: -5px或其他东西来解除它。

Answer 2

为图标添加一个独特的类：

<h4> Wijzigingen <i class="fa fa-circle custom-icon" aria-hidden="true"> </i> </h4>

并为元素提供更小的字体大小：

.custom-icon {
    font-size:12px;
}

您可以将字体大小更改为您想要的大小。

Answer 3

在h4中定义类以添加fa icon类Wijzigingen，否则它将适用于所有h4标签，或者您也可以添加父div类＆amp;在css中定义它（.divclass h4＆amp; .divclass .fa.fa-circle）。

h4.Wijicon{
    position: relative;
}
h4.Wijicon .fa.fa-circle {
    top: -4px;
    position: absolute;
    font-size: 12px;
    margin-left: 3px;
}