Issue
I have the following code, and I know something is wrong but I can't tell what.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="D:\.social-menu.css">
</head>
<body>
<img src="C:3225888.jpg" alt="Nature" class="responsive">
<!--Social Media-->
<div class="conectt">
<ul class="social-icons">
<a href="http://www.instagram.com"><img style="width: 38px;" src='C:twitter.png'/></a>
<a href="http://www.facebook.com"><img style="width: 38px;" src='C:facebook.png'/></a>
<a href="http://www.youtube.com"><img style="width: 38px;" src='C:youtube.png'/></a>
</li>
</div>
</body>
</html>
I wanted to add images to the left side of the image. I know that something is wrong but I haven't been able to figure it out. How do I add these icons on the left side of the image?
Solution
The best way is to use fontawesome. You have 2 possibilities :
First possibility : load fontawesome ressources from cdn link :
<!-- Use CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />
Second possibility : download fontawesome files with this link and create folder in your project named font and put fontawesome files in :
<!--Internal file-->
<link rel="stylesheet" href="fonts/fontawesome-free-5.15.4-web/css/all.css">
This is all code using fontawesome with cdn :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="D:\.social-menu.css">
<!-- Use CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />
<!--Internal file-->
<!--<link rel="stylesheet" href="fonts/fontawesome-free-5.15.4-web/css/all.css">-->
</head>
<body>
<style>
#root{
display: flex;
flex-direction: row;
align-items: center;
}
#root .conectt{
margin: 25px;
}
.social-icons{
list-style: none;
padding-left: 0;
}
.social-icons li{
padding: 10px;
}
.social-icons a{
text-decoration: none;
color: black;
}
</style>
<div id="root">
<div class="conectt">
<ul class="social-icons">
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-square"></i></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<img src="C:3225888.jpg" class="nature" alt="Nature" class="responsive">
<!--Social Media-->
</div>
</body>
</html>
Image : 
Answered By - Horly Andelo Answer Checked By - Cary Denson (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.