Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas.

The problem lies in the styling of a CSS pseudo-element before, which is defined as follows:

#fPhone::before{
    color: #78be20;
    content: "\e622";
    font-family: icons;
}

However, when viewed on the browser, it only displays 622 instead of the desired icon. Upon inspecting the pseudo tag, I noticed that the content value is "e622". Even though adding "\" manually in the debugger resolves this, it doesn't seem to be recognized by the CSS.

I am running low on explanations as to why this discrepancy is occurring.

htmlcsspseudo-element

Answer №1

Make sure you have correctly imported the icon font and are using the correct hex code. Here is a demonstration to show that it is working as expected...

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

#fPhone::before{
    color: #78be20;
    content: "\e0cd"; /* different code, but same effect */
    font-family: 'Material Icons';
}

/* class is pre-defined in @import (default <parent>color, 24px) */
.material-icons { color: #78be20; font-size: 16px; }

/*
  Find the codes and ligatures for Material Icons at:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

*/
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>

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

Modifying the title of a webpage with a Bootstrap design

As a newcomer to HTML/CSS, I recently utilized a Bootstrap theme from Themezy to build my personal website. The template includes a navigation bar with tabs labeled Top, Work, Portfolio, and Contact. I felt the need to change Top to About, so I replaced ...

htmlcsstwitter-bootstrap

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...

htmlforms

Jquery submenu accordion toggles open and closed with each click

My website has a hamburger menu with an accordion-style submenu implemented using jQuery for devices 1084px and smaller. For larger devices, the menu utilizes a hover-style submenu on desktop. However, I encountered issues when trying to use both the hove ...

javascripthtmljquerycss

Obtaining JSON data in a separate JavaScript file using PHP

I have an HTML file with the following content: // target.html <html xmlns="http://www.w3.org/1999/xhtml"> ... <script src="../../Common/js/jquery-ui-1.10.3.js"></script> <script src="../../Common/js/select.js" type="text/javascript"& ...

javascriptphphtmljson

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout

Show the particular entry to be viewed upon clicking the link provided in the email

How can I create a link in an email that, when clicked, displays data for a single record? Currently, I have a datatable on the index page that shows all records when the app is opened. When a change is made to a record, an email is sent out with the ID o ...

c#htmlmodel-view-controller

Struggle between Angular and fundamental CSS principles

Upon following the steps below, I aim to achieve my desired grids: How to set auto-margin boxes in flexible-width design using CSS? The solution provided is effective when implemented outside of Angular. However, when inserted inside an Angular component ...

cssangulartypescript

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Harvest information using BeautifulSoup and Python

Exploring the world of web scraping with BeautifulSoup in Python, I am interested in extracting the package name and price of each app from the Android Play Store. For retrieving the package name, I implemented the following code : url = "https://play.go ...

pythonhtmlbeautifulsoup

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

javascripthtmlangularjsangular-material

Spontaneous visual paired with text upon refreshing

I am new to Java script and I am working on creating a web page that displays two random numbers every time it is refreshed. Depending on these numbers, specific text should be shown. These numbers are represented by images ranging from 0 to 5. Currently ...

javascripthtmlarraysrandomtext

Shifting text higher to the <h1> tag using CSS

I'm currently attempting to move the paragraph header closer to my h1 title. I'm struggling with incorporating the position function and have tried using padding without success. On the image, I am aiming to position the text "Where every connec ...

csstext

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

javascripthtmlcss

Tips for adjusting the size of a drawing on an HTML 5 canvas within a personalized Polymer component

In my custom Polymer element, I am looking to dynamically resize an html5 canvas when the window resize event occurs. Despite trying to utilize the window.onresize event, I encountered difficulties with accessing canvas functions. One of the functionalit ...

javascripthtmlcanvaspolymer

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

"Troubleshooting problems with jQuery click function during real-time search execution

In my code, I have an empty result div that dynamically fills up with item elements as search queries are entered (using jQuery ajax). If I use the following code: $(".result").click(function(){ alrert("click on whole result class captured") }); I r ...

jqueryhtml

The custom HTML menu implementation is causing the jQuery autocomplete to lose its "Select" functionality

Seeking assistance in implementing jQuery autocomplete with a custom drop down menu. I have managed to customize menu items using the data()._renderItem method (which is currently commented out), however, this approach disables the menu "Select" function ...

jqueryhtmlmenuautocomplete

Ways to position a button at the bottom of a div and beneath an image

Hey there, I have a little issue that seems to be causing me trouble. My brain just can't seem to come up with the solution. Here's the HTML code: #div { position: fixed; top: 10%; left: 20%; right: 20%; bottom: 10%; ...

htmlcss