Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Html and Css icon help!

  1. Jan 1, 2016 #1
    Hello!
    I have added an icon to my home page and i'm trying to add it to multiple pages without adding it to every time on the page.Is there anyway i can accomplish this task?If yes,then please help me with this.
    Thanks!
     
  2. jcsd
  3. Jan 1, 2016 #2

    Borg

    User Avatar
    Science Advisor
    Gold Member

    You could put it in a header that each of your pages uses.
     
  4. Jan 1, 2016 #3
    Tha
    thanks borg!i will have to use an iframe for that,then?
     
  5. Jan 1, 2016 #4

    Borg

    User Avatar
    Science Advisor
    Gold Member

    Not necessarily. You can use a simple jquery javascript to include a header or footer like this:
    Code (Javascript):

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(function(){
      $("#header").load("header.html");
      $("#footer").load("footer.html");
    });
    </script>

    <body>
    <divid="header"></div>
    <!--Remaining section-->
    <divid="footer"></div>
    </body>
     
     
  6. Jan 1, 2016 #5
    T
    hAnk you very much!
    I was actually unaware of such functions.
    Can we use jquery to add the nav bar to every page?
     
  7. Jan 1, 2016 #6

    Borg

    User Avatar
    Science Advisor
    Gold Member

    Yes, just add it to the header.html file.
     
  8. Jan 1, 2016 #7

    Borg

    User Avatar
    Science Advisor
    Gold Member

    BTW, if you have any loading issues, try putting the script after the body section.
     
  9. Jan 1, 2016 #8
    Thanks!
    I'm very thankfull to you for this help...
     
  10. Jan 1, 2016 #9

    jtbell

    User Avatar

    Staff: Mentor

    If you're using PHP, you can also use the PHP 'include' or 'require' function. All my pages are PHP and have something like the following at the beginning of the <head> section:
    Code (Text):

    <?php require 'common_head.php' ?>
     
    This includes code for the traditional favicon, the apple-touch-icon, the android-chrome icon, a link to my master CSS stylesheet, etc. After this 'require' statement comes all the page-specific header stuff: the <title>, meta description, etc.
     
  11. Jan 1, 2016 #10

    Borg

    User Avatar
    Science Advisor
    Gold Member

    Or, the jsp version:
    <jsp:include page="header.jsp"/>
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Html and Css icon help!
  1. HTML - iframe CSS (Replies: 3)

  2. HTML + Javascript + CSS (Replies: 11)

Loading...