stack community,
I couldn't find a solution to this issue yet and I hope someone can help me.
I have a WordPress-Website which is using a theme, so far everything works seamlessly. However, the "footer" of this website is not a Widget, I added the content on every page manually. I know it is a pain to adjust stuff, but for this project, it was a fast solution.
My issue is the following:
I am using social media icons as buttons and they are linked. The links work fine on a desktop (using Chrome and Safari) and on Google's "Developer Tools" window with the different selection of screen sizes. For example, if I select "iPhone" the links work. But as soon as I open the site on my actual phone, I cannot click on them, they aren't working.
Why is this and how can I fix it?
Here are some screenshots:
Here is the html code shown for the facebook icon in Google Dev Tools with CodePen:
<div class="wpb_wrapper"><div class="btn-align-center">
<a href="https://www.facebook.com/iamviola.de/" class="default-btn-shortcode dt-btn dt-btn-l fadeIn animate-element animation-builder full-width-btn vc_custom_1523221889433 animation-triggered start-animation" target="_blank" id="default-btn-7"><span>
<svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-2x" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
<!-- <i class="fab fa-facebook-f fa-2x"></i> -->
</span></a>
</div></div>
Codepen HTML for facebook icon
The thing is, I can click on every other link on my website apart from these icons. I never had this issue before.
Thank you for your help!
The first things I would check on mobile are the target areas for your icon links, and if there might be another (invisible) element that is on top of these links.
For the first question, temporarily edit your css and add a background color to the anchor tags of your social media links, and check if these target areas are where you expect them to be.
For the second question, using inspector, examine elements close to the social media links, looking for something that might be on top of your links.
If you don't have any joy, you could share a link to your site so others can help.
Good luck!
Related
The fa-sticky-note-o icon is not being displayed in
<em class="fa fa-sticky-note-o" aria-hidden="true"></em> on my Chromebook, which is current. Other icons, such as <em class="fa fa-desktop" aria-hidden="true"></em> are displayed. It does appear when expressed as Unfortunately, this is a major documentary feature on https://marlinfw.org/docs/configuration/configuration.html I doubt that they are going to want to code their page differently just for my benefit. :)
I looked at the source of the Marlin document when it became evident that something was missing. I checked the FontAwesome cheatsheet https://fontawesome.com/v4/cheatsheet/ and see that it is displayed when expressed as I was hoping to find how to update or define the icon, but didn't find anything that told me how to do that. I see that "/assets/stylesheets/fontawesome.min.css" is part of the of the head.load javascript at top of the page. Could that be corrupted somehow? How would I force a reload?
Your fontawsome.min.css file appears to be missing a class definition for .fa-note-stick-o.
You'll want to add the following class definition(s) to it:
.fa-note-sticky-o:before,.fa-sticky-note-o:before{
content:"\f24a"
}
I am managing a Wordpress-powered website for my faculty. Today when I share a link of the website to my student, I discovered that there is a hidden span element in the code of the site, and it only shows up in the sharing preview (Open Graph or Facebook Graph) if the content of the page is short enough
The span element look like this:
<span class="keys_words" style="display: none;">
<a class="links_good_rands" href="some random link">Some random text</a>
|
<a class="links_good_rands" href="some random link">Some random text</a>
</span>
I have tried deactivating all plugins and changing the theme, but the element persists. Google search results don't really help, either.
The website is http://ngoaingu.vimaru.edu.vn/. The code is injected at the end of the main entry content.
Can anyone check this out and help me get rid of this strange element?
The Quantity up and down arrows svg, which use the following code:
<button class="button button--icon" data-action="dec">
<span class="is-srOnly">Decrease Quantity:</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-down"/>
</svg>
<button class="button button--icon" data-action="inc">
<span class="is-srOnly">Increase Quantity:</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-up"/>
</svg>
</i>
</button>
only show up on select products on our website (Buttons still work). I haven't been able to figure out if there is a pattern or a method to why they are showing up or not showing up, but some of them look like this:
and others look like this:
If more info is needed, please let me know, but this is all I could find that was relevant, but I could be mistaken.
The arrows are generated by JavaScript. If they are showing on some pages and not on others, that would lead me to believe there is a JavaScript error on the page where they are not loading. Open your Chrome DevTools console to check for any JavaScript errors, and try to resolve them. Without a link to the site, I cannot say specifically what the error is that is breaking this.
I might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
what's the effect of aria-hidden in Font Awesome?
Is it necessary to use it? why? or why not?
for example, I want to know the effect of aria-hidden="true" in the code below:
<i class="fa fa-star" aria-hidden="true"></i>
In short, it makes the icon not visible to screen readers, to enhance accessibility.
From the documentation:
If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
If you're using an icon to add some extra decoration or branding, it
does not need to be announced to users as they are navigating your
site or app aurally. Additionally, if you're using an icon to visually
re-emphasize or add styling to content already present in your HTML,
it does not need to be repeated to an assistive technology-using user.
You can make sure this is not read by adding the aria-hidden="true" to
your Font Awesome markup.
<i class="fa fa-fighter-jet" aria-hidden="true"></i>
an icon being used as pure decoration
<h1 class="logo">
<i class="fa fa-pied-piper" aria-hidden="true"></i>
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
an icon being used as a logo
Source: http://fontawesome.io/accessibility/