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"
?
Related
I am trying to use tag icon in the html but it's not showing the icon.
This is how I am trying to display the icon but it's not displaying the icon
<i class="fas fa-plus"></i>
But whereas if I use icon like below it's displaying the icon
<fa-icon [icon]="['fas','plus']"></fa-icon>
But I need to display Icon as in the below type in order to do my logics.
<i class="fas fa-plus"></i>
Any Help, Thanks!
You need to make sure that the font awesome library is properly loaded on the page. If you are using the Angular CLI, you can add the following line to the section of your HTML file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Once the library is loaded and available, you can use the tag to display the icon.
You must be missing an link tag in the header of the index.html. Also try to use:
<i class="fa fa-plus"></i>
When I'v tried to use the i tag for icons, i noticed the "fas" was not working for me. I had to remove the "s"
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
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 have a working whatsapp <a> tag in this way:
<a class="whatsapp share-local-button
data-action="share/whatsapp/share"
target="_blank" href="whatsapp://send?text=link#withMark" >
<i class="fa fa-whatsapp"></i>
</a>
This works, but what is in href is simply the shared text, not the url, which is the current....
I tried with
data-href="link#withMark"
But no different results...
How can I share my customized url and not the current one?
Try adding something like a bit of PHP if you are able to. if you want to keep it clean html then just ignore this.
in php u define the link u want to set in a variable, then just add <?php $yourvariable ?> to the whatsapp://send?text= INSERT HERE
Add a JavaScript code as I did to dynamically add the link.
Also it is reusable and can be used in any page.
Here, we set the href of the element having class=whatsapp to it's href+ the site link.
Try running the code
document.getElementsByClassName('whatsapp')[0].href+=window.self.location;
<a class="whatsapp share-local-button
data-action="share/whatsapp/share"
target="_blank" href="whatsapp://send?text=">
<i class="fa fa-whatsapp">whatsapp</i>
</a>
i am working on setting up my social icons on footer using font awesome and bootstrap-social.css. When i do this
<button class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>
it works properly see image
but when i try to use same css classes in < a > tag
<a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
i get result like this see image,its hover,icon in the middle, etc. styles are messed up.
There is a 'how to use' example on original page where i dl-ed bootstrap-social.css with < a > tag used because of that i am confused.
So my goal is to apply that button like style to a link or add link in button with that style if its possible somehow. Any help is appreciated.
<a class="btn btn-social-icon btn-facebook" href="here paste your link"><i class="fa fa-facebook"></i></a>
When you use <a> element it has default hover properties,so you can disable them.
Here is example: https://jsbin.com/qogunenura/1/edit?html,css,output