CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Lion
Lion

Reputation: 313

how to combine external css with index.html file

using follwing fontowesome social media links and need draw a circle around social media logo. how can do this?

<ul class="social-media list-inline" align="right">
                    <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
                    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
                    <li><a href="#"><span class="fa fa-instagram"></span></a></li>
                    </ul>

I am going to select follwing css file

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Upvotes: 0

Views: 504

Answers (2)

neo73
neo73

Reputation: 464

<head>
<link rel="stylesheet" type="text/css" href="your file name.css">
</head>

wrap each

  • in a div with id circle it may get you your circle icons

    Upvotes: 0

    • Bharath Kumar
    Bharath Kumar

    Reputation: 558

    .social-media li {
  list-style-type: none;
  padding: 10px 10px;
  background-color: pink;
  display: inline-block;
  border-radius: 50px;
}
    <html>
  <head>
  <script src="https://use.fontawesome.com/a2e210f715.js"></script>
  </head>
  <body>
    <ul class="social-media">      
      <li><a href="#"><span class="fa fa-envelope"></span></a></li>
      <li><a href="#"><span class="fa fa-twitter"></span></a></li>
      <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
      <li><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>
  </body>
</html>

    By using border-radius and padding we can form a circle around the icons.

    Upvotes: 4

    Related Questions