A[href$= ".pdf"]:before changes on mobile - odd behavior

HTML & CSS
1

On this page I’m using this code to post an icon before each linked PDF document:

a[href$= ".pdf"],
a[href$= ".pdf"]:hover {
	color: #333;
}
a[href$= ".pdf"]:before {
	content: "\f1c1";
	font-family: FontAwesome;
	display: inline-block;
	height: 18px;
    line-height: 18px;
    padding: 6px 7px;
    border-radius: 50%;
    margin-right: 0.5em;
	color: #fff;
	background: #840000;
}
a[href$= ".pdf"]:hover:before {
    content: "\f18e";
 	font-family: FontAwesome;
	display: inline-block;
	height: 18px;
    line-height: 18px;
    padding: 6px 7px;
    border-radius: 50%;
    margin-right: 0.5em;
	color: #fff;
	background: #840000;
}

On desktop devices I’m not having a problem seeing the PDF icon for FontAwesome. But if I look at it on mobile/tablet devices, the icons disappear and turn into broken icons.

Am I missing something?

2

Do mouseless devices have “hover”?

AFAIK, some may have something like “light tap = hover” but I don’t think all do.

3

Hover or not, the icon is still missing as a ‘link’.

4

To add, I load this in an emulator (Browserstack) and I don’t see the fonts either. Yet on my live system (Windows 7/Chrome) I can see them fine.

5

I don’t see FontAwesome being loaded on the page anywhere. Do you maybe have it installed on your own computer and that’s why it works for that particular machine?

6

The URL is there:
Capture

I’ve even verified that ‘f18e’ exists.

7

True. There is however no font with the name FontAwesome defined in that stylesheet.
There is a font with the name Font Awesome 5 Free and when I use that in the developer toolbar I can see the icon as well on my machine, where before I would just see a white rectangle.

font-family: "Font Awesome 5 Free";
8

That IS peculiar!
Just did the same thing as you mentioned in my Developer Tools editor and it worked as well. I’ll wait for the cache to clear up to run another thorough test.

Thank you, ScallioXTX.

9

Well on this page I’m using a zoom icon in the ‘search’ bar and it doesn’t display with the use of ‘Font Awesome 5 Free’, but it does respond to ‘FontAwesome’. But if I look at it on mobile, the icon disappears.

10

I wound up utilizing the theme’s ‘etModules’ fonts. While it is limited, I am able to make it fully functional.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.