I need help with social icons

HTML & CSS
1

I need to set up four social media icons in a header of site they must look like tihis picture

how can I do that?

2

There are many ways you can arrange icons like that using css.
You could use flex-box, display-table, css columns, floats, absolute positioning or just regular inline flow.
Flex-box would be the most modern and flexible way to do it, but the other options would have better legacy browser support.
Wait a while and I will try to make some examples.

2 Likes
3

Thank you a lot SamA74. I appreciate your effort

4

This is an example using flex-box.

I may add some more…

EDIT
The second example uses display table, but needs extra divs to make rows.

3 Likes
5

Once again thank you a lot

7

###Version 3:

<!doctype html>
<html lang='eng-UK'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title goes here</title>
<head>
<style>
.blok-4   {background-color:cyan; 
           width:125px; height:125px; margin:0em auto; padding:0; 
          }
.blok-4 a {background-image: url(https://placehold.it/50x50);
           display:inline-block; width:50px;  
           border: transparent solid 2.5px; 
           margin:5px 0 0 5px; padding:0; 
           line-height:50px;
           text-align: center;
           font-size:22px;
           text-decoration:none;
           float:left;
           border-radius:15px;
          }
.blok-4 a:hover   {border:solid 2.5px #f3f3f3; color:red;}
</style>
</head>
<body>
  <div class="blok-4">
    <a href="#">C</a>
    <a href="#">O</a>
    <a href="#">D</a>
    <a href="#">E</a>
  </div>
</body>
</html>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.