I would like to add the name base on the attribute title as there is no text displayed for the link but instead a icon using font-awesome
My link are like this :
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
</a>
I need solution without javascript involve
Like this:
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
<meta itemprop="name" content="Whatever Name You Want" />
</a>
(Note edited to remove incorrect alternative after below discussion).
Though as an aside, as per below conversaation, some question on whether <i> tag should even be used: Should I use <i> tag for icons instead of <span>?
Related
Lighthouse suggesting to fix my a href text
I have a html like that
What is really happens here is I just displaying the image inside a href by using css class:
.social-icon.twitter {
background: url('../images/logo-twitter.png') no-repeat center center;
}
I can't do <a....>Twitter</a> as in that case the displayed text will destroy the view.
I can't think of anything else like just putting a span with a text inside my a and make it hidden e.g <a....><span class="hide">Twitter</span></a> but wonder if there is any proper solution?
Any recommendations on that?
For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.
Fix it by adding aria-label="Twitter" to your a element, like
If want to implement this in react app then, We need to add aria-label property to <a> tag.
Before:
<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
After:
<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
For SlickNav
The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem.
Working example is Oceanspace
For other similar issues you have to add title attribute to the respective anchor element
Not sure if using a div class is the best way to go about this. I am trying to have the URL load when the facebook icon is clicked.
<div class="social facebook">
</div>
Without wrapping a URL into an "a" tag, you can do it like this;
<i class="fab fa-facebook-f" onclick="location.href = 'https://www.facebook.com/'"></i>
Using an "a" tag you can use this;
<i class="fab fa-facebook-f"></i>
Note: here I use font awesome icon tag "i"
Lighthouse suggesting to fix my a href text
I have a html like that
What is really happens here is I just displaying the image inside a href by using css class:
.social-icon.twitter {
background: url('../images/logo-twitter.png') no-repeat center center;
}
I can't do <a....>Twitter</a> as in that case the displayed text will destroy the view.
I can't think of anything else like just putting a span with a text inside my a and make it hidden e.g <a....><span class="hide">Twitter</span></a> but wonder if there is any proper solution?
Any recommendations on that?
For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.
Fix it by adding aria-label="Twitter" to your a element, like
If want to implement this in react app then, We need to add aria-label property to <a> tag.
Before:
<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
After:
<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
For SlickNav
The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem.
Working example is Oceanspace
For other similar issues you have to add title attribute to the respective anchor element
I wanted to add social profile links schema for SEO,
Now according to https://developers.google.com/structured-data/customize/social-profiles
<a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
It should work, but what if in my code it has to be:
<a itemprop="sameAs" href="https://twitter.com/your-company">
<i class="fa fa-twitter"></i>
</a>
Would this be understood by Search Engines correctly as a twitter link or would they just understand it as a social media link without being able to figure out that the href points to twitter? I'm pretty sure it works, but I'd like to be more sure.
I have the following code:
<i class="fa fa-chevron-left"></i>
but when I add an id and onclick attribute like so:
<i class="fa fa-chevron-left" id="back" onclick="backNews();"></i>
the icon disappears. Can anyone see the problem?
The icon re-appears if I remove the attributes
I have also tried to remove the <i> and replace it with a <span> tag, but no luck.
Any suggestions are welcome
Please check if your site's css by accident applies css rules for #back. Does it happen also if you use only id="back" or onclick="backNews();"? Does it happen if you change id like this
id="backNow"
?