Is anyone experiencing difficulties with IOS 8.3 when trying to assign colors to Font Awesome icons using content?

I'm encountering an issue on IOS 8.3 where I click a checkbox and the arrow color should be green, but it shows up as black instead.

Is there a bug fix for this in IOS or is it simply not supported?

Here is my SASS/css code:

input[type="checkbox"] + .field-label-replaced {
    &:before {
        background-color: $C-Bg-Field;
        border:           1px solid $C-Border; // Using px value to address field edges disappearing during zoom-out
        box-sizing:       border-box;
        color:            $GIP-OxfamGreen;
        content:          '';
        height:           $D-FieldElement;
        text-align:       center;
        width:            $D-FieldElement;
    }
}

input[type="checkbox"]:checked + .field-label-replaced {
    &:before {
        color:            $GIP-OxfamGreen;
        content:            '\2714';
    }
}

If you'd like to replicate the issue yourself, feel free to check out my Codepen account where I've provided a demonstration.

http://codepen.io/mattclaffey/pen/EjNwRw

htmlioscss

Answer №1

It's fascinating how Unicode characters can appear differently depending on where they are displayed. They may even show up as colorful symbols, rather than plain tones, making them immune to CSS color styles.

For instance, consider this link: http://jsfiddle.net/f4joLkmg/

In Chrome and Safari, the symbol shows a purple umbrella with blue raindrops, while in Firefox, it remains a single-color image, taking on the red styling applied to it.

Unfortunately, I don't have access to an IOS 8.3 device (where the issue was reportedly seen) to test how a checkmark symbol is rendered there. It's likely that this OS version assigns predefined colors to symbols, removing control over text color.

To address this challenge, you could leverage Font Awesome, which you mentioned in your question title but didn't utilize here. Utilizing Font Awesome if it's already integrated in your project would be a practical solution:

&:before {
    font-family: FontAwesome;
    color: $GIP-OxfamGreen;
    content: '\f00c';
}

If Font Awesome isn't part of your project yet, it might be worth considering its inclusion for consistency and enhanced visual appeal. Icon fonts generally offer more reliable outcomes compared to Unicode symbols and often look more aesthetically pleasing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS: Avoiding text overflow in a div container

Utilizing Bootstrap 4, I have a div containing lengthy text that causes overflow within the element. The issue is depicted in this image example. By introducing spaces to shorten words, the text displays correctly without overflowing. However, extended ...

htmlcssbootstrap-4

Refresh the value of a JavaScript variable on the server using a script executed on the client side

Hello, I'm working on a webpage that utilizes JavaScript to find the location of my device. I am interested in updating the variables within the JavaScript code from a script that runs on my laptop. Is this even possible? Below is the code snippet: i ...

javascriptjqueryhtmlgeolocation

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

pythonhtmldjangobootstrap-4

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

My issue lies with the data-backdrop attribute in my Bootstrap 4 modal. It does not function as expected. The intended behavior is for the modal to close when clicked outside of it, but this is not happening. I am using Angular 6: I have attempted setting ...

jqueryhtmlbootstrap-4angular6

Storing past entries in a local storage using JavaScript

Currently, I am developing a JavaScript program that involves 3 input boxes. The program is designed to display whatever is typed into each input box on the page. To store and re-display previous submissions, I have implemented local storage. However, I en ...

javascripthtmlcsslocal-storagestringify

Tips for ensuring smooth rendering of big fonts in Chrome on OSX

On my Macbook Pro running Mojave, I noticed that regular fonts appear normal, but large fonts look jagged in Chrome (unlike Safari or Firefox). You can see an example on CodePen .large { font-size: 300px; font-weight: bold; } Chrome https://i.sstat ...

cssgoogle-chromefontscross-browser

Tips on adjusting the size of an HTML canvas specifically for the display

Currently, I am working on an innovative project utilizing HTML5 and canvas: The challenge at hand is to draw on a canvas with dimensions of 2200px/1600px (width/height), display it on my website in a smaller window sized at 600px/400px. However, post cli ...

jquerycsshtmlhtml5-canvas

Tips for making a dynamic active button using javascript

I'm trying to create a toggle button with eight buttons. When seven out of the toggle buttons are clicked, it should toggle between two classes and change its CSS styles. If the daily button is clicked, it should toggle the styles of the other seven b ...

javascripthtmlcss

CSS - Yet another perplexing question that shouldn't have arisen

While working on building this website in CSS, I hadn't encountered any major issues up until now. Suddenly, I'm facing a problem with basic positioning within my body-3 class div. Instead of pushing it downward and elongating the page as expecte ...

csshtml

Arrays in Javascript (correlating)

I'm having trouble figuring out what needs to be included in this code (I apologize that it's in German, it's an array corresponding to images for JavaScript.) function namenZuBildern(){ var bilder = new Array( "000227", "000228", " ...

javascriptjqueryarrayshtmlcss

Checking the Length using JQuery

My dilemma is with a text field (datepicker) - I want the button to change color when someone selects a date, but it's not working. Can you please assist me? HTML <input type="text" id="datepicker"> <button type="button" onclick="" class=" ...

jqueryhtmlcss

Loading Web Applications Screen

My web app contains multiple tree views. Upon loading the page, I first see the unordered lists before the styling of the trees is displayed in the DOM after a brief delay. Is there a method to mask the web app with a spinner placed in the center of the s ...

javascriptjqueryhtmlcssweb-applications

Retrieve the location of video(s) embedded in raw HTML code

When loading a webpage into my WebView, I am able to retrieve the raw HTML as text. This particular page contains various video elements that are embedded within it, and I am looking to extract their locations as a list of strings in order to download them ...

c#htmlxamlwebviewmicrosoft-metro

Looking to insert an image in the top-left corner of a div?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

cssimagehtmlbackground

Assign the responsibility of a table cell to a different table view

I am currently involved in a project that relies on the use of UITableView. Within my UIStoryboard, I have set up six main categories. My goal is to have each cell in the table view lead to another UITableView. I have tried using delegation with segues, b ...

iosswiftuitableviewdelegatescell

Display a selected portion of the background image

I'm currently facing an issue with one of the background images in my div element. The CSS I'm using is as follows: .myBox { background-image:url('....'); background-repeat:no-repeat; background-size:cover; } The background image d ...

htmlcssbackgroundbackground-image

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

"Transfer" the code within a Message Sending template

Although I am not well-versed in coding like many of you, I have been able to customize a free template to suit my needs. However, I am struggling with one aspect. When users submit their information on the contact form, I want their message and details to ...

htmlcss

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

javascriptcssmaterial-ui

The functionality of my Javascript code is restricted to a single element within a Python embedded for loop in Django2

My Python for loop is iterating through these HTML template cards, each accompanied by JavaScript. However, I'm encountering an issue where the JavaScript only seems to work on the first element (specifically, it's meant to retrieve the seeked po ...

javascriptpythonhtmldjangoaudio