Place text next to Facebook icon - html

I want to place the text Follow Us on the far right next to the facebook Icon. I added float:right to make it appear next to the Facebook Icon but it's not working for some reason.
This is my code -
Website Designed and Developed By <strong><font style="color: #00FF00"></font><font style="color: #666666"></font></strong>, Web Design Blackburn, Web Design Lancashire<span><h1 style="float:right">Follow Us</h1></span>
This is the site I am working on - http://loweraudleytyres.co.uk/dev/. Trying to edit the footer.
Screenshot of footer
Also the footer is hardcoded, so does require customisation.

#java11 I wasn't able to add an image to my comment, so I'm adding as an answer because I believe it resolves your issue as well.
Code:
<li><a href="https://en-gb.facebook.com/audleytyres/">
<i class="fa fa-facebook"> FOLLOW US </i></a>
</li>

Put your logo and your text in a a tag (link) with the style float:right; & add display:inline;
Example :
<a href="#" style="float:right;">
<i class="fa fa-facebook" style="float:left;"></i>
<span style="display:inline; margin-left:5px;">FOLLOW US</span>
</a>

Related

Odd rendering for font-awsome

From time to time after page refresh fontawesome icons get this rendered this way:
When they should look like this:
Is there anything I am missing my html or CSS?
This is the HTML to display each of those menu options is as simple as:
<li class=""><a ui-sref="Resources" title="Resources">
<i class="fa fa-lg fa-fw fa-globe"></i>
<span class="menu-item-parent ng-binding">Resources</span>
<b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
</li>
The parent elements for the menu are:
<aside id="left-panel"><nav nav-menu="" stopwatch="true">
<ul><li><!--menu time --></li>
It seems something like mojibake. It could depend on the files (css and html) or document encoding. The file one should be utf-8 without bom.

Inline css for modern days?

I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?
In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.
Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.

Using cookies for notifications to disappear

I'm new to this.. cookie thing, but a friend of mine told me to check it out if I wanted my notification to disappear.
this is what I have
<font style="float:right">
<nav class="dropdownContainer">
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
<ul class="dropdown">
<span class="text1">
Hello!
<p>We updated a few changes to the website. Keep yourself updated by reading more.
<p>
<span class="btn-read" style="text-align:right;">Read more</span>
</span>
</ul>
</nav>
</font>
When it's checked, I want this div to change.
<span class="lightpill-warn dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
To this:
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> </span>
I don't know if it's possible? But I hope it is, so I don't need to change the code all the time to take it away.
You will need to use a server or a client side langauge like PHP or Javascript to do that. HTML is only a markup language (no logic).
Hope I helped you.

Why isn't this valid XHTML?

I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?

Website links behaving abnormally

I have made this website: http://manojpandey.tk/ implementing Bootstrap v.3
In the Contact section, I have added some social buttons.
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
</ul>
They are showing some abnormal behaviour that I don't get. When someone clicks on the button directly, a blank webpage with same url opens. Opening in new tab does good.
But, why does the former does not work. Any help will be appreciated.
<a class="btn btn-default btn-lg" href="http://twitter.com/manojpandey96" target="_top"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
Works for me. So just add:
target="_top"
to the a-Tags.
Is there a reason why you are using frames?
Edit:
The Frames are causing the problem. Without adding target, the link usually will open within the frame. But if you add target="_top", then it will be loaded in the full window, ignoring the frames.
More detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a