Is it possible to add a Logo link and social media icons when building a Jquery mobile website? I'm building a small Jquery mobile website as an assignment. The whole thing looks good but I want the logo image to link to the home page and also include a couple of social media image links using the icon links from Fontawesome.
Here is an image of the homepage. enter image description here
I want to set the planet image as a link to the home page but when I added a code to the html syntax, it obscured the image. Also in the footer I want the two media icons to be position on the right side of the copyright tagline in an in-line block on the same line but I couldn't make that happen with my current code.
Here is a snippet of the two codes for the header and the footer sections.
<div data-role="page" id="home" data-theme="d">
<div data-role="header">
<a href="#index">
<img src="images/planetgradient-sm.png" width="53px" height="35px" class="ui-btn-left"></a>
<h1>Amateur Astronomy</h1>
<a href="#nav-panel" data-icon="gear" class="ui-btn-right">More Options</a>
</div>
</div>
and this is the code for the footer:
<div data-role="footer">
<div data-role="icons">
<ul>
<li><h2>© Amateur Astronomy 2021</h2></li>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
</ul>
</div>
</div>
What changes should I make to the code to get the right affect for the footer area? I welcome your suggestions. Thank you in advance.
