[英]Font awesome icon button with label below
我需要創建一個帶有字體真棒圖標的按鈕,並在該圖標下方的文本創建一個導航菜單。 結果應類似於MS功能區中的圖標:
我還需要該箭頭下方的箭頭(即“新”按鈕)以獲取更多選項...
這就是我創建按鈕的方式:
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
以圖標類為text-align: center
。
還有一種可能是使用before
和after 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>
只有幾處改變:)
當然,您也可以使用前選擇器放置圖像。.因此,按鈕上有兩個圖像,中間有文本。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.