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
Related
I don't know how to explain this clearly, the following code notification shows on clicking the link/an href element.
I would like to load it on page load itself, without click, how ?
<a href="" data-toast="snackbar-7">
<i class="fa font-14 fa-check color-green-dark"></i>
<span>Confirmation Snackbar</span>
<i class="fa fa-angle-right"></i>
</a>
<div id="snackbar-7" class="snackbar-toast color-white bg-green-dark mb-4" data-bs-delay="3000" data-bs-autohide="true">
<h1 class="color-white font-20 pt-3 pb-3 mb-n4">Success</h1>
<p class="color-white mb-0 pb-1">Changes applied succesfully.</p>
</div>
The intention is to show notification on database data submission using PHP.
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>
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.
I am using tawdis online tool to validate WCAG 2.0 AA Level compatibility. I am facing an error "Consecutive text and image links to the same resource", when I use below code. How to fix this error in WCAG validation ?
<ul>
<li><div><em class="fa fa-instagram" title="instagram"></em></div></li>
<li><div><em class="fa fa-facebook-square" title="facebook"></em></div></li>
<li><div><em class="fa fa-pinterest-square" title="pinterest"></em></div></li>
<li><div><em class="fa fa-youtube-square" title="youtube"></em></div></li>
</ul>
This refers to the H2: Combining adjacent image and text links for the same resource technique of the WCAG.
As I suppose you have posted your full code, I guess that you use some sort of javascript for those links. And so the Tawdis parser thinks that those links target the same URI.
In reality, this is a bad analyze from that parser as it should have noted that the anchor # is often used to mark a javascript link (although it's not a valid URI and a bad practice).
You have different things to do:
use a meaningful tag for what appears to be a button, not a link,
do not use a tag like em which has a semantic meaning,
provide a text alternative.
Example:
<ul>
<li><button class="fa fa-instagram">Instagram</button></li>
<li><button class="fa fa-facebook-square">Facebook</button></li>
<li><button class="fa fa-pinterest-square">Pinterest</button></li>
<li><button class="fa fa-youtube-square">Youtube</button></li>
</ul>
try this
<ul>
<li><div><em class="fa fa-instagram" title="instagram" alt="instagram"></em></div></li>
<li><div><em class="fa fa-facebook-square" title="face" alt="face"></em></div></li>
<li><div><em class="fa fa-pinterest-square" title="pinta" alt="pinta"></em></div></li>
<li><div><em class="fa fa-youtube-square" title="youtube" alt="youtube"></em></div></li>
</ul>
Techniques/HTML/Combining adjacent image and text links for the same resource
Problem
I am using wordpress and fontawesome icon library to add icon to each list item. I have added class to each list item by enabling "CSS Classes" from "Show advanced menu properties" from Screen option. I tried wp_nav_menu and various other tricks but failed to output class like fa fa-home
Code
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
<li><i class="fa fa-user"></i>About</li>
<li><i class="fa fa-camera"></i>Gallery</li>
<li><i class="fa fa-gift"></i>Shop</li>
<li><i class="fa fa-bullhorn"></i>Blog</li>
<li><i class="fa fa-envelope"></i>contact
</ul><!-- #primary-menu -->
I want to output those classes individually to each "i" element in list item. Please, suggest any code snippets or walk-through.
This code (from your question) is not standard WP code - yours is including <i> elements:
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
</ul>
WP outputs menus like so, without the <i> element:
<ul class="menu">
<li id="menu-item-8" class="fa fa-home menu-item menu-item-type-post_type menu-item-object-page menu-sample-page">
Sample Page
</li>
</ul>
Notice the class fa fa-home on the <li> element above? That was added by adding the class (just like you described). Additionally, it created the icon desired in the menu.
If you aren't getting the icon, ensure that font awesome is actually being loaded, and that the font files are installed and in the right directory relative to the font awesome stylesheet.
How are you adding the <i> elements? The only way you could achieve this (using the technique you are trying to use) would be to Write a custom menu walker, but that's a lot of work to add the icons, since you an add them simply by editing the class via the Menu dashboard.