CODEWITHSUNDEEP
csssemantic-ui
vhflat
vhflat

Reputation: 589

How can I get an icon verically centered inside a button with Semantic UI

I've add a button inside a a content div which is inside a item div. I want to add a nice "read more" button with an icon inside it. This is the code I've used. 

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

Which results in a button where the icon is not centered vertically as shown below.

Upvotes: 1

Views: 3147

Answers (4)

tempus71
tempus71

Reputation: 175

Use "basic button" class

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

Upvotes: 0

vhflat
vhflat

Reputation: 589

I wasn't able to solve the problem from the other answers but it made me realize that it's the difference in font-size that makes the icon decentered.

using 

i.icon {
    font-size: inherit;
}

I finally got this result:

enter image description here

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try this:

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>

Upvotes: 0

Jazzzzzz
Jazzzzzz

Reputation: 1633

Try below way, hope it will be useful to you

a{
  border:1px solid blue;  
  text-decoration:none;
  padding:10px;
  display:inline-block;
}
<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>

Upvotes: 1

Related Questions