HTML/CSS Icon Help with HTML & CSS | Get Answers Now!

  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Css Html
AI Thread Summary
To add an icon or other elements to multiple pages without manually inserting them each time, users can utilize jQuery or server-side scripting. A common approach is to place the icon in a shared header or footer file, which can be loaded across all pages using jQuery's `.load()` method. This method allows for easy updates since changes made to the header or footer file will automatically reflect on all pages. For PHP users, the 'include' or 'require' functions can be employed to insert common elements like favicons and stylesheets at the beginning of the head section. This method streamlines the process and ensures consistency across the website. Additionally, for optimal loading, it is recommended to place the script tags after the body section if loading issues occur.
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!
 
Technology news on Phys.org
You could put it in a header that each of your pages uses.
 
  • Like
Likes 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 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 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.
 
  • #10
Or, the jsp version:
<jsp:include page="header.jsp"/>
 

Similar threads

HTML/CSS Container shrinks at certain screen widths (CSS)
Replies
5
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
Replies
5
Views
2K
HTML/CSS Are HTML and CSS files necessary in the HTDOCS folder for PHP to work in XAMPP?
Replies
3
Views
3K
HTML/CSS Cascading Style Sheets in XHTML 1.0 STRICT
Replies
4
Views
3K
Comp Sci Designing HTML+CSS for 23 toothpicks game
Replies
4
Views
1K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
Replies
6
Views
2K
HTML/CSS Help> make an HTML page to solve engineering examples
Replies
12
Views
3K
HTML/CSS I'm trying to center box in CSS and HTML
Replies
1
Views
3K
I'm struggling with the CSS counter mechanism(s)
Replies
1
Views
1K
HTML/CSS Is There a Way to Indent Tables in XHTML?
Replies
3
Views
3K

Hot Threads

Recent Insights

Back
Top