下方带有标签的真棒字体图标按钮 [英] Font awesome icon button with label below
问题描述
我需要创建一个带有字体真棒图标的按钮,并在该图标下方的文本创建导航菜单.结果应类似于MS功能区中的图标:
I need to create a button with a font awesome icon and a text below that icon for a navigation menu. The result should look like i.e. the icons in the MS ribbon:
我还需要该箭头下方的箭头(即新建"按钮)以获取更多选项...
I also need the arrow below of that (ie. "new"-button) for more options...
这是创建按钮的方式:
JSFiddle: http://jsfiddle.net/3GMjp/77/
JSFiddle: http://jsfiddle.net/3GMjp/77/
.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>
推荐答案
要在按钮下方放置文本,请添加display: block
:
To place the text bellow the button, add display: block
:
.my-text {
display: block;
font-family: "Courier-new";
}
要使图像居中,请添加text-align
:
To center your image, add a text-align
:
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
text-align: center;
}
对于箭头,添加div
和此CSS:
For the arrow, add a div
and this 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/
JSfiddle: http://jsfiddle.net/ghorg12110/3GMjp/418/
SNIPPET:
.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>
这篇关于下方带有标签的真棒字体图标按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!