-1

I am trying to create a circle with a tag and putting icon inside that circle. But that icon is coming little down.

0

5 Answers 5

2

The position of your icon was due to the padding and the default line-height of your a element. You can try to remove the padding and set the line-height equal to the element height.

You can also use CSS flex to center your icon.

* {
  box-sizing: border-box;
}

body {
  background: black;
}

#no-padding {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
  line-height: 44px;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

#flex {
  display: inline-flex;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

i {
  color: white;
}
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a id='no-padding'><i class="fab fa-facebook-f"></i></a>
  <a id='flex'><i class="fab fa-facebook-f"></i></a>
</body>

</html>

1
  • It worked by removing the padding and setting the line-height to the same as the height. Can achieve the same with flex too.
    – Pujan Shah
    Nov 6, 2019 at 6:35
2

Try this CSS:

* {
  box-sizing: border-box;
}

body {
  background: black;
}

a {
  display: flex;          /* Newly added */
  align-items: center;    /* Newly added */
  border: 1px solid #fff; 
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

i {
   color: white;
}

a i {
  margin: 0 auto; /* Newly added */
}
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a><i class="fab fa-facebook-f"></i></a>
</body>

</html>

3
  • I made you a snippet. Please change it to how you meant it to look - you missed the color: white;
    – mplungjan
    Nov 6, 2019 at 6:24
  • It is working with the flex, can't we do it by passing line-height the same as height and width?
    – Pujan Shah
    Nov 6, 2019 at 6:27
  • Ohh, as I am giving height and width explicitly no need to give padding.
    – Pujan Shah
    Nov 6, 2019 at 6:31
0

Add these styles to icon.

display: inline-block;
padding: 0px 15px; /* changed style */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
line-height: 44px; /* added style */
0

You can do by using line height try this:

a {
   display: inline-block;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
    width: 44px;
  height: 44px;
  line-height: 44px;
  align-items: center;
  text-align: center;
  justify-content: center;
  transition: all 0.2s;
} 
0

I think, flexbox is the simplest solution, just add these lines to your "a" tag:

display: flex;
justify-content:center;
align-items:center;

Not the answer you're looking for? Browse other questions tagged or ask your own question.