Icon Help with HTML & CSS | Get Answers Now!

  • Thread starter Dave Ritche
  • Start date
  • Tags
    Css Html
In summary: Yes, just add it to the header.html file.BTW, if you have any loading issues, try putting the script after the body section.yes, just add it to the header.html file.Thanks!
  • #1
Dave Ritche
70
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
  • #2
You could put it in a header that each of your pages uses.
 
  • Like
Likes Dave Ritche
  • #3
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?
 
  • #4
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
  • #5
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?
 
  • #6
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
  • #7
BTW, if you have any loading issues, try putting the script after the body section.
 
  • #8
Borg said:
Yes, just add it to the header.html file.
Thanks!
I'm very thankfull to you for this help...
 
  • #9
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"/>
 

Related to Icon Help with HTML & CSS | Get Answers Now!

1. What is HTML?

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It is the foundation of all websites and is used to structure and display content on the internet.

2. What is the difference between HTML and CSS?

HTML is used to structure and organize the content of a web page, while CSS (Cascading Style Sheets) is used to style and format the content. HTML defines the structure and CSS defines the presentation of that structure.

3. How do I add an icon to my HTML page?

To add an icon to your HTML page, you can use the <link> tag and specify the location of the icon file in the href attribute. For example: <link rel="icon" type="image/png" href="my-icon.png">. You can also use the <img> tag to insert an icon directly into your HTML code.

4. What is the purpose of using classes in HTML and CSS?

Classes in HTML and CSS are used to group elements together and apply styles to multiple elements at once. This allows for more efficient and organized styling of a web page, as well as the ability to reuse styles across multiple elements.

5. How can I center my HTML page content?

To center the content of your HTML page, you can use the margin: 0 auto; CSS property on the parent element. This will center the element horizontally within its container. You can also use the text-align: center; property to center text within an element.

Similar threads

Replies
3
Views
2K
  • Engineering and Comp Sci Homework Help
Replies
4
Views
1K
  • Programming and Computer Science
Replies
14
Views
3K
  • Engineering and Comp Sci Homework Help
Replies
1
Views
1K
Replies
40
Views
2K
  • Programming and Computer Science
Replies
7
Views
1K
Replies
7
Views
330
  • Programming and Computer Science
Replies
31
Views
3K
  • Programming and Computer Science
Replies
2
Views
2K
  • Programming and Computer Science
Replies
12
Views
3K
Back
Top