bartonlewis Posted June 16, 2018 Share Posted June 16, 2018 I have some social nav's at the bottom of my page in the footer which are not appearing. On another page with almost identical css the nav's appear. I can't detect the difference in the 2 pages except one is controlled by an external style sheet (where it's not working properly) and the other the css is inside the html document. I've pasted the relevant html and css below. Can anyone tell me why the facebook and instagram nav's don't appear? Thank you. <!DOCTYPE html> <html> <head><link rel="stylesheet" type="text/css" href="mystyle.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton Lewis - photography - wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body { font-family: "europa",sans-serif; margin: 0; } .parallax { /* The image used */ background-image: url("http://bartonlewisfilm.com/img_bckgd_windows_7283_1920-3.jpg"); /* Set a specific height */ height: auto; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: repeat; background-size: cover; padding-bottom: 1%; } h1 { font-family: "europa",sans-serif; font-size: 3.6em; letter-spacing: .3em; text-align: center; color: black; padding: 5% 0; padding-top: 7%; } h2 { font-family: "europa",sans-serif; font-size: 2.8em; color: black; letter-spacing: .2em; text-align: center; padding-bottom: 5%; } h3 { font-family: "europa",sans-serif; font-size: 2.2em; color: black; letter-spacing: 1.5px; text-align: center; padding-bottom: 1%; } h4 { font-family: "europa",sans-serif; font-size: 2em; color: black; letter-spacing: 1.5px; text-align: center; padding-bottom: 1%; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .category { margin: 7% 0; } .container { margin: 0 auto; } .container p { font-size: 1.6em; margin: 10% 30%; line-height: 125%; } .wallcut { margin: 6% auto 10%; } div.wallcut p { text-align: center; font-size: 1.6em; margin: 4% auto 5%; } .underline { text-decoration: underline; font-variant: small-caps; } a:hover { text-decoration: underline; } img { vertical-align: middle; } .center_width { display: block; margin-left: auto; margin-right: auto; width: 58%; } p.return { font-size: 2em; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 100%; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 80%; letter-spacing: .8px; line-height: 135%; font-weight: 500; } </style> </head> <body> <div class="parallax"> <h1 style="text-align:center">Barton Lewis</h1> <h2 style="text-align:center">wall cuts</h2> <section class="flex-container"> <div class="nav"><a href="index.html" title="home">home</a></div> <div class="nav"><a href="bartons_film_site_works.html" title="works">works</a></div> <div class="nav"><a href="bartons_film_site_bio.html" title="bio">bio</a></div> <div class="nav"><a href="bartons_film_site_cv.html" title="c/v">c/v</a></div> <div class="nav"><a href="bartons_film_site_contact.html" title="contact">contact</a></div> </section> </div> <div class="category"> <h3 style="text-align:center">Blacks</h3> </div> <div class="container"> <div class="wallcut"> <img src="img_287-135.jpg" alt="287-135, Flushing Ave., IND Crosstown Line" class="center_width"> <p>287-135, Flushing Ave., IND Crosstown Line</p> </div> </div> <p class="return" style="text-align:center"><a href="photography.html">Back</a> to main wall cuts page.</p> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html> Link to comment Share on other sites More sharing options...
epner Posted June 16, 2018 Share Posted June 16, 2018 Hi! It seems that you aren't linking Font Awesome CSS with your HTML. Just copy-paste Font Awesome CDN CSS link before your CSS link, and it should be fine. CDN: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> Link to comment Share on other sites More sharing options...
bartonlewis Posted June 16, 2018 Author Share Posted June 16, 2018 Oops, you are so right. Everything working perfectly now. Thank you!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now