带有下面标签的字体真棒图标按钮答案

【问题标题】：Font awesome icon button with label below带有下面标签的字体真棒图标按钮
【发布时间】：2015-06-30 21:16:58
【问题描述】：

我需要创建一个带有超棒字体图标的按钮，以及该图标下方的导航菜单文本。结果应如下所示，即 MS 功能区中的图标：

我还需要它下方的箭头（即“新”按钮）以获得更多选项...

这就是我创建按钮的方式：

.my-fancy-container {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 60px;
  padding: 10px;
}
.my-text {
  font-family: "Courier-new";
}
.my-icon {
  vertical-align: middle;
  font-size: 40px;
}

<div class="my-fancy-container">
  <span class='icon icon-file-text my-icon'></span>
  <span class="my-text">New</span>
</div>

【问题讨论】：

标签： html css font-awesome

【解决方案1】：

要将文本放在按钮下方，请添加display: block：

.my-text {
  display: block;
  font-family: "Courier-new";
}

要使图像居中，请添加text-align：

.my-fancy-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  margin: 60px;
  padding: 10px;
  text-align: center;
}

对于箭头，添加 div 和这个 css ：

<div class="arrow-down"></div>

CSS：

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 0 auto;
}

JSfiddle：http://jsfiddle.net/ghorg12110/3GMjp/418/

片段：

.my-fancy-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  margin: 60px;
  padding: 10px;
  text-align: center;
}

.my-text {
  display: block;
  font-family: "Courier-new";
}

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
    margin: 0 auto;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class="my-fancy-container">
    <span class='icon icon-file-text my-icon'></span>
    <span class="my-text">Hello World</span>
    <div class="arrow-down"></div>
</div>

【讨论】：

【解决方案2】：

将display: block 和text-align: center 添加到您的图标类。

Fiddle

【讨论】：

【解决方案3】：

另一种可能性是使用before 和selector 之后

See this fiddle

正如您在 css 中看到的那样

 .my-fancy-container {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 6px;
        margin: 60px;
        padding: 30px;
        position: relative;
    }
    
    .my-fancy-container::after {
        content: "\f0d7";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
    /*--adjust as necessary--*/
        color: #000;
        font-size: 18px;
        padding-right: 0.5em;
        position: absolute;
        bottom: 5px;
        left: 45%;
    }
    
    .my-text {
        font-family: "Courier-new";
    }
    
    .my-fancy-container::before {
        content: "\f15c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
    /*--adjust as necessary--*/
        color: #000;
        font-size: 28px;
        padding-right: 0.5em;
        position: absolute;
        top: 5px;
        left: 40%;
    }
    
    .my-icon {
        vertical-align: middle;
        font-size: 40px;
    }

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>

<div class="my-fancy-container">
    <span class="my-text">Hello World</span>
</div>

只有一些变化:)

当然，您也可以使用 before 选择器来放置图像。所以按钮上有两个图像，中间有文本。

【讨论】：