What am I doing wrong with the CSS?
Question
Trying to import three social media icons in to my website. The size of the icons are not getting right, what am i doing wrong here? This is the html code:
Gonna make the question easier for you to understand since this is something im trying to add at the end of my project right now.
<body>
<section>
<div class="container">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
--More code beneath--
So im putting the icons in a already existing section and div since i want the icons to be on top of the page.
Then you have the css for the section and div:
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 100px 0;
}
.container {
background-color: white;
width: 90%;
max-width: 900px;
margin: 0 auto;
box-shadow: 0px 0px 61px 7px #5e849c40;
padding: 50px 20px;
border-radius: 20px;
text-align: center;
}
And finally you have what im trying to import:
ul {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
text-align:center;
margin:10px 10px;
box-sizing: border-box;
text-decoration:none;
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
background: linear-gradient(0deg, #ddd, #fff);
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
position: relative;
width:60px;
height:60px;
display: inline-block;
text-align:center;
margin:10px 10px;
border-radius: 50%;
box-sizing: border-box;
text-decoration:none;
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
background: linear-gradient(0deg, #ddd, #fff);
transition: .5s;
}
I suppose there is something in the section or div('.container') that could be messing this up, just not able to see it after hours of trying already:'(
3 answers
solution1
1 2021-05-09 19:30:08
Instead of class .fa , try using class .fab and using this link: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
Reference: https://fontawesome.com/icons
ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; padding: 0; justify-content: center; align-items: center; text-align: center; margin: 0 10px; box-sizing: border-box; text-decoration: none; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); background: linear-gradient(0deg, #ddd, #fff); } ul li { list-style: none; } ul li a { position: relative; width:60px; height:60px; display:block; text-align:center; margin:0 10px; border-radius: 50%; padding: 6px; box-sizing: border-box; text-decoration:none; box-shadow: 0 10px 15px rgba(0,0,0,0.3); background: linear-gradient(0deg, #ddd, #fff); transition: .5s; } ul li a:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.3); text-decoration:none; } ul li a.fab { width: 100%; height:100%; display: block; background: linear-gradient(0deg, #fff, #ddd); border-radius: 50%; line-height: calc(60px - 12px); font-size:24px; color: #262626; transition: .5s; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <ul> <li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li> </ul>
solution2
1 2021-05-09 19:53:47
the class="fa fa-facebook" is used in the old version of fontawesome, if you want to use class="fa fa-facebook" you have to use this link below
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
But if you want to use the newest link you should go to FontAwesome's site and copy the icon code.
solution3
0 2021-05-09 19:49:57
You are not linking the fonts.
ul { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; text-align:center; margin:10px 10px; box-sizing: border-box; text-decoration:none; box-shadow: 0 10px 15px rgba(0,0,0,0.3); background: linear-gradient(0deg, #ddd, #fff); padding: 0; } ul li { list-style: none; } ul li a { position: relative; width:60px; height:60px; display: inline-block; text-align:center; margin:10px 10px; border-radius: 50%; box-sizing: border-box; text-decoration:none; box-shadow: 0 10px 15px rgba(0,0,0,0.3); background: linear-gradient(0deg, #ddd, #fff); transition: .5s; }
<:-- Font Awesome icons (free version)--> <script src="https.//use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script> <section> <div class="container"> <ul> <li><a href="#"><i class="fab fa-facebook fa-4x" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fab fa-twitter fa-4x" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fab fa-instagram fa-4x" aria-hidden="true"></i></a></li> </ul> </div> </section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.