带有下方标签的字体真棒图标按钮
Font awesome icon button with label below
我需要创建一个带有超棒字体图标的按钮,并在该图标下方为导航菜单创建一个文本。结果应该类似于 MS 功能区中的图标:
我还需要下方的箭头(即 "new"-按钮)以获得更多选项...
这就是我创建按钮的方式:
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
:
.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>
将 display: block
和 text-align: center
添加到您的图标 class。
另一种可能性是使用 before
和 selector
之后
如您在 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>
只有一些变化:)
当然,您也可以使用前置选择器放置图像。这样按钮上就有两个图像,中间有文本。
我需要创建一个带有超棒字体图标的按钮,并在该图标下方为导航菜单创建一个文本。结果应该类似于 MS 功能区中的图标:
我还需要下方的箭头(即 "new"-按钮)以获得更多选项...
这就是我创建按钮的方式:
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
:
.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>
将 display: block
和 text-align: center
添加到您的图标 class。
另一种可能性是使用 before
和 selector
如您在 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>
只有一些变化:)
当然,您也可以使用前置选择器放置图像。这样按钮上就有两个图像,中间有文本。