如何在右下角的按钮上添加图标

Question

我知道如何使用font-awesome和其他一些css文件来获取按钮中的图标，如下图所示。

但是现在我的要求是在按钮的右下角有这个图标。有点像...

我正在使用bootstrap和font-awesome。

Answer 1

创建一个这样的css类，并将其分配给图标span：

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

此外，按钮需要分配position: relative;，以便绝对定位的图标坐标相对于按钮。

这是一个小提琴： http://jsfiddle.net/8a2jbp7f/2/

如果您想要像图片中那样旋转的插入符号，请使用@BenW发布的文字。

Answer 2

正如Mario和Ben建议的那样，我已经修改了我的小提琴中的代码以获得我想要的内容

HTML

<button type="button" class="btn btn-sm btn-default">
My Contacts <span class="caret"></span>
</button>

的CSS

button {
    margin:20px;
    position: relative;
}
.caret {
    position: absolute;
    bottom: 1px;
    right: 0px;
    /* Safari */
    -webkit-transform: rotate(-45deg);
    /* Firefox */
    -moz-transform: rotate(-45deg);
    /* IE */
    -ms-transform: rotate(-45deg);
    /* Opera */
    -o-transform: rotate(-45deg);
}

最终Fiddle

Answer 3

也许用css文字旋转！？ https://css-tricks.com/snippets/css/text-rotation/

Answer 4

.btmRight .fa-plus {
  position: absolute;
  right: 0;
  bottom: 0;
}

添加此样式并检查。