下方带有标签的真棒字体图标按钮

Question

我需要创建一个带有字体真棒图标的按钮，并在该图标下方的文本创建一个导航菜单。 结果应类似于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> 

Answer 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> 

Answer 2

添加display: block和text-align: center以图标类为text-align: center 。

小提琴

Answer 3

还有一种可能是使用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> 

只有几处改变:)

当然，您也可以使用前选择器放置图像。.因此，按钮上有两个图像，中间有文本。