1 Correct answer
Why don't you use one of the pre-built Bootstrap starter pages in Dreamweaver? It's a good way to jump start your project without added costs.
Go to File > New > Starter Templates > Bootstrap Templates. Choose one of the layouts and hit CREATE button. Save your newly created page as index.html and edit as required.
Tutorials:
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap4/
One final bit of advice. Get
...
36
Replies
@Deleted User.
I prefer Font Awesome icons for social media. Less bandwidth and icons can be scaled up or down without any quality loss.
Just for fun, I put together this animated version. Icons spin when you hover your mouse over them. The circles behind icons can be further styled with CSS to suit your site design.
Working Code Example: (copy & paste code into a new, blank document).
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Font Awesome Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background: #222;
width: 90%;
margin: 0 auto;
color: antiquewhite
}
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px;
background-color: tomato;
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
/**OPTIONAL ANIMATION ON HOVER**/
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.9s;
transition: all 0.9s
}
</style>
</head>
<body>
<h2>Font Awesome Icons</h2>
<ul class="social-network social-circle">
<li><a href="#" title="Facebook"><i class="fa fa-2x fa-facebook-f"></i></a></li>
<li><a href="#" title="Twitter"><i class="fa fa-2x fa-twitter"></i></a></li>
<li><a href="#" title="Pinterest"><i class="fa fa-2x fa-pinterest"></i></a></li>
<li><a href="#" title="Instagram"><i class="fa fa-2x fa-instagram"></i></a></li>
</ul>
<hr>
<h3>Font Awesome Cheatsheet</h3>
<p><a style="background:antiquewhite; padding:0.5%" href="https://fontawesome.com/v4/cheatsheet/">https://fontawesome.com/v4/cheatsheet/</a></p>
</body>
</html>
Post back if you have any questions.
Don't read emails. Come back to the web forum where I corrected the error.
AdChoices
