Rounded Social Icons with CSS, UL, LI, and A Tags

Here's how you can create rounded social icons using unordered lists (ul), list items (li), and anchor tags (a) with CSS styling:

HTML:

<ul class='social-icons'>
  <li><a href='#'><i class='fa fa-facebook'></i></a></li>
  <li><a href='#'><i class='fa fa-twitter'></i></a></li>
  <li><a href='#'><i class='fa fa-instagram'></i></a></li>
  <li><a href='#'><i class='fa fa-linkedin'></i></a></li>
</ul>

CSS:

.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-icons li {
  display: inline-block;
  margin-right: 10px;
}

.social-icons li:last-child {
  margin-right: 0;
}

.social-icons li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: black;
  color: white;
  transition: background 0.3s ease;
}

.social-icons li a:hover {
  background: white;
  color: black;
}

In this code, you'll need to replace the `` elements with appropriate font icons or your own custom icons. Ensure you include the necessary CSS files for the icons you choose (e.g., Font Awesome).

Adjust the width, height, and margin values according to your preferences.