1

I am now working with custom icon font that I made. Just trying something I got this. I have my style-sheet file in which all my fonts with their respective content property and its value like,.assassin_creed:before {content: "\e018";}
Seeing this class in chrome console it gives me back something like .assassin_creed::before {content: "";} Why am I getting this box instead of the content value? How can I be able to retrieve its value in text in chrome console ??

Here's the image

cronoklee
  • 6,482
  • 9
  • 52
  • 80
bantya
  • 576
  • 11
  • 23

1 Answers1

0

Its a invalid escaped unicode string, so its showing the Box thats even box will be displayed, if you use Chinese fonts which is not loaded in your browser.

Access Property Value in JS:

 var assassin_creed = document.querySelector('.assassin_creed'), 
      result   = getComputedStyle(assassin_creed, ':before').content;

  console.log('the generated content is: ', result); // returns '\e018'

Try like below to understand better:

.assassin_creed:before {
  content: '>\0000a0';
}

Similar Question: Font Awesome Showing Box instead of Icons

Refer Content CSS Property to understand better:
https://developer.mozilla.org/en/docs/Web/CSS/content
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_before
Adding HTML entities using CSS content

Community
  • 1
  • 1
Venkat.R
  • 7,420
  • 5
  • 42
  • 63
  • But Anna, the custom font I made which contains Assassins Creed icon is rendered perfectly in all (chrome, ie, firefox, opera) browsers. The code displays the icon perfectly on the page. I have to retrieve its content value using javascript so that further action can be taken. To proceed further I have to get the value in text format like "\e018", not like the displayed box in image above, so how would I be able to retrieve its value in text format using javascript..?? – bantya Jan 25 '16 at 17:01