Html and Css icon help!

  • #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!
 

Answers and Replies

  • #2
Borg
Science Advisor
Gold Member
1,881
2,355
You could put it in a header that each of your pages uses.
 
  • Like
Likes Dave Ritche
  • #3
Tha
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?
 
  • #4
Borg
Science Advisor
Gold Member
1,881
2,355
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 Dave Ritche
  • #5
T
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?
 
  • #6
Borg
Science Advisor
Gold Member
1,881
2,355
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 Dave Ritche
  • #7
Borg
Science Advisor
Gold Member
1,881
2,355
BTW, if you have any loading issues, try putting the script after the body section.
 
  • #8
Yes, just add it to the header.html file.
Thanks!
I'm very thankfull to you for this help...
 
  • #9
jtbell
Mentor
15,614
3,638
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.
 
  • #10
Borg
Science Advisor
Gold Member
1,881
2,355
Or, the jsp version:
<jsp:include page="header.jsp"/>
 

Related Threads on Html and Css icon help!

  • Last Post
Replies
19
Views
958
  • Last Post
Replies
11
Views
2K
  • Last Post
Replies
3
Views
59K
Replies
4
Views
905
Replies
1
Views
2K
Replies
3
Views
771
  • Last Post
Replies
7
Views
2K
  • Last Post
Replies
23
Views
2K
  • Last Post
Replies
5
Views
622
Top