Skip to main content
A
Anonymous
March 4, 2022
Answered

missing images

  • March 4, 2022
  • 2 replies
  • 4230 views

Trying too add social media to footer and the images are missing.... not sure how to address it

    This topic has been closed for replies.
    Correct answer Nancy OShea

    well thank you for your help... looks like there too many issues on this templete... i chose free bc i do enjoy coding... i just know the basics... basiclly html and css.  i know that bootstrap is for responsive sites... So i will keep looking and see if there is a better free templete.... thank you again for your help.


    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 a web hosting plan so you can test your work on an actual server.

    https://www.pcmag.com/picks/the-best-web-hosting-services

     

    Good luck!

     

     

    2 replies

    A
    Anonymous
    March 4, 2022

    So i took your suggestion but i don't know what the problem results mean... plz translate... sent you a copy of my problem area hope this helps if not plz be more specific

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 5, 2022

    @22610720.

    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.

     

    Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 5, 2022

      is there a full ones for everything i am trying for? fb  twitter instragram, linkedin, pintrest dribble, and behance?


      See my post above.

       

      Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 4, 2022

      What images are missing?  Please be more specific by posting a URL to the problem page online.  Or show us the code you're working with.

      In the meantime, check your code for validation errors by going to Windows > Results > Validation.  Fix all reported errors.

       

       

       

       

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices