CSS Pseudo Element ::marker not visible on Mobile Phones (IOS)

Question

I am Creating a Static Website and I am using a pseudo element of marker to change the List Items icons using Font Awesome icons and I am hosting the website on github Pages.

I am able to see the list item icons when I use my Laptop to view the page and when I use the Toggle Device toolbar and select a mobile phone screen in chrome on laptop I am able to view the correct result. But When I view it on my IOS device I cant see the expected result. I am unable to debug the problem. Can anyone help me out point out the mistake.

Here is the Code snippet to implement the Icon for List Item. It works perfectly fine in laptop screen.

.className ul li::marker{
      color:var(--heading);
      font-size:20px;
      content: "\f064";
      font-family: 'Font Awesome 6 Free';
      font-weight: 700;
      justify-content: center;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="className">
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
</ul>

</div>

Now when I view it on my phone it would appear as a circle instead of arrow.

Now this is working fine in laptop browser but not on an IOS device.

What version of Fontawesome are you using and how are you loading it? — A Haworth, Jul 24 '22 at 18:16
I am using Font Awesome 6 version and I have downloaded the Kit and included in The project. I have included the all.min.css in the head section. I am able to use in the laptop screen but as soon as I view it in Phone(IOS) I can see bullet points instead of arrows. — Tushar Sethi, Jul 25 '22 at 06:05
Your question has been closed but I can’t see that the duplicate question has a solution to the IOS problem given you are running OK on other systems. Have you found a solution? — A Haworth, Jul 25 '22 at 06:38
No and I don’t know why people are marking it as a duplicate question. Either they aren’t reading the question. — Tushar Sethi, Jul 26 '22 at 08:55
Can you edit the question to include a runnable snippet so we can try it on IOS devices? I will vote to reopen if so. — A Haworth, Jul 26 '22 at 08:57
My question is completely different from what the other question is referring to. I was facing problem with pseudo and specifically with ::marker one. — Tushar Sethi, Jul 26 '22 at 08:57
Now view this question on laptop and then on a mobile phone and you’ll see what I am talking about. I can see bullet points when I run the snippet on IOS — Tushar Sethi, Jul 26 '22 at 09:09
Thank you - I can now see the problem - the arrows appear fine on my WIndow10/Edge but on my iPad/IOS15 Safari they appear as bullets. I am voting to reopen the question. — A Haworth, Jul 26 '22 at 09:38
Even chrome in IOS does not seem to be working as expected. It also shows bullet points. — Tushar Sethi, Jul 26 '22 at 13:15
Okay Got it. Any reason why it isn't working. and any other way to do it. — Tushar Sethi, Jul 26 '22 at 16:01
Well, seems it's not working because it's a bug. You could look at using before pseudo element instead of marker. — A Haworth, Jul 26 '22 at 17:03

Frank Conijn - Support Ukraine · Answer 1 · 2022-07-26T09:55:40.623

2

EDIT:

See if changing the double colon to a single one cures it. Older Safaris only support single colons in pseudo element selectors.

Also, Safari's support for marker is limited to color and font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

edited Jul 26 '22 at 09:55

answered Jul 26 '22 at 09:44

Frank Conijn - Support Ukraine

3,050
1
22
29

1

It also seems that though it supports color it isn’t supporting color with a var as value, at least on testing on iPad IOS 15. – A Haworth Jul 26 '22 at 13:11
Nope! If I change it to single colon it does not work even on windows. CSS does not recognize it as a pseudo element anymore. – Tushar Sethi Jul 26 '22 at 16:00

CSS Pseudo Element ::marker not visible on Mobile Phones (IOS)

1 Answers1