如何结合字体 - 令人敬畏和CSS三角形？

Question

我正在尝试为将三角形添加到字体 - 令人敬畏的图标中的通用解决方案。我有一个我的代码的工作演示： http://jsfiddle.net/remisture/2gg6d/5/

但这不是非常优雅且灵活，因为代码包含字体大小和像素值的边距。如果基于父的字体大小生成三角形的大小和放置，那将是完美的，当然也支持字体 - 真棒的“FA-2X” - “FA-5X”类： http://fontawesome.io/examples/

任何帮助将非常感激。

html

<div class="triangle"> 
   <i class="fa fa-plus-square"></i>
</div>

.

css

.triangle {
    font-size: 30px;
    position: relative;
    border: none;
    width: 40px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    color: #68aaa9;
}
.triangle:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: #68aaa9;
    border-width: 5px;
    margin-left: -5px;
    margin-top: -6px
}

.

Answer 1

我对您的 CSS 进行了一些更改，以便到达所需的行为。根据父母字体大小，三角形的大小和定位。这不是像素完美，但你应该得到这个想法并能够调整它。

要点是仅使用EM或百分比值来定位三角形并设置边框宽度。

演示 （我也简化了样式表，所以它是更容易调整）

在此之后，您可以使用要支持的其他类的边框宽度和定位的其他类别添加新类（fa-2x-fa-5x）。

相关CSS：

.triangle {
    position: relative;
    border: none;
    display: inline-block;
    color: #68aaa9;
    line-height:1em;
}
.triangle:after {
    content:" ";
    position: absolute;
    height: 0;
    width: 0;
    border: 0.18em solid transparent;
}
.triangle.triangle-bottom:after {
    top: 90%;
    right:0.268em;
    border-top-color: currentColor;
}
.triangle.triangle-top:after {
    bottom: 0.95em;
    left:0.268em;
    border-bottom-color: currentColor;
}
.triangle.triangle-left:after {
    right: 100%;
    top: 0.268em;
    border-right-color: currentColor;
}
.triangle.triangle-right:after {
    left: 100%;
    top: 0.268em;
    border-left-color: currentColor;
}

.