how to combine external css with index.html file

Question

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

Have you tried anything on this? Also can you add in the css for those specific classes as well? Someone should be able to give you a working example. — Syfer
– Syfer, Commented Aug 4, 2017 at 4:32
Your ID is not referenced in the HTML you sent, also add in the css for the classes thats in the above code please? — Syfer
– Syfer, Commented Aug 4, 2017 at 4:40

Bharath Kumar · Accepted Answer · 2017-08-04 04:42:39Z

4

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

answered Aug 4, 2017 at 4:42

Bharath Kumar

5581 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bharath Kumar Over a year ago

Is this only you are expecting??

Bharath Kumar Over a year ago

Its is the font-awesome CDN link

Bharath Kumar Over a year ago

Font Awesome CDN is the easiest way to get icons on our web page.

Lion Over a year ago

now I need circle witch middle empty (like ring) how can do this?

Bharath Kumar Over a year ago

sorry bro, now I get the point. We can add CDN in multiple ways. I used script tag. I got this one to my email from fontawesome.io. I had mentioned there my email address.

|

neo73 · Accepted Answer · 2017-08-04 05:13:54Z

0

<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

edited Aug 4, 2017 at 5:13

answered Aug 4, 2017 at 4:45

neo73

4645 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to combine external css with index.html file

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related