How do I reuse an HTML icon across multiple pages?

  • Context: HTML/CSS 
  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Css Html
Join the discussion
Registration is free. Ask a follow-up in this thread, or start your own.
Sign up Log in
9 replies · 2K views
Dave Ritche
Messages
70
Reaction score
6
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!
 

Discussion

Physics news on Phys.org
You could put it in a header that each of your pages uses.
 
  • Like
Likes   Reactions: Dave Ritche
Tha
Borg said:
You could put it in a header that each of your pages uses.
thanks borg!i will have to use an iframe for that,then?
 
Dave Ritche said:
thanks borg!i will have to use an iframe for that,then?
Not necessarily. You can use a simple jquery javascript to include a header or footer like this:
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>
 
  • Like
Likes   Reactions: Dave Ritche
T
Borg said:
Not necessarily. You can use a simple jquery javascript to include a header or footer like this:
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>
hAnk you very much!
I was actually unaware of such functions.
Can we use jquery to add the nav bar to every page?
 
Dave Ritche said:
Thank you very much!
I was actually unaware of such functions.
Can we use jquery to add the nav bar to every page?
Yes, just add it to the header.html file.
 
  • Like
Likes   Reactions: Dave Ritche
BTW, if you have any loading issues, try putting the script after the body section.
 
Borg said:
Yes, just add it to the header.html file.
Thanks!
I'm very thankfull to you for this help...
 
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: 
<?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.
 
Or, the jsp version:
<jsp:include page="header.jsp"/>
 

Similar threads

PHP PHP files infected with redirect to malicious site across multiple subdomains

  • bigdawg723
  • · Replies 5 ·
  • Programming and Computer Science
Replies
5

How Do You Calculate Voltage Drop Across Multiple Resistors?

  • orangeincup
  • · Replies 4 ·
  • Engineering and Comp Sci Homework Help
Replies
4

How Do You Calculate Voltmeter Readings Across Multiple Points?

  • nokia8650
  • · Replies 9 ·
  • Introductory Physics Homework Help
Replies
9