如何在带有语义UI的按钮内部获得一个图标

Question

我在内容div中添加了一个按钮，该按钮位于项目div中。我想添加一个漂亮的“阅读更多”按钮，里面有一个图标。这是我用过的代码。

<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="chevron right icon"></i>
    </a>
  </div>
</div>

这会导致图标不垂直居中的按钮，如下所示。

Answer 1

尝试以下方式，希望它对您有用

＆＃13;

＆＃13;

a{
  border:1px solid blue;  
  text-decoration:none;
  padding:10px;
  display:inline-block;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我无法从其他答案中解决问题，但它让我意识到字体大小的差异会使图标偏心。

使用

i.icon {
    font-size: inherit;
} 

我终于得到了这个结果：

Answer 3

试试这个：

a.basic.button{
    border:1px solid #66fcf1;
    color: #66fcf1;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}
a.basic.button i{
  vertical-align: middle;
}
a.basic.button:hover{
  background:#66fcf1;
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="fa fa-chevron-right"></i>
    </a>
  </div>
</div>

Answer 4

使用“基本按钮”类

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<button class="ui basic button">
  Read more
<i class="icon angle right"></i>
</button>