CSS content seems to gets stripped

  • Resolved genericname

    (@genericname)


    5 years, 8 months ago

    Hi,
    I currently have something like this in my css:

    .hamburger:before {
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: 25px;
        ...
}

    When I check the front-end the icon doesn’t show up and the content shows up as content: ""; in the console/page source. If I were to change it to a random text like “Testing” it will show up fine.

    Is this normal behavior? Am I maybe missing a step?

    Edit: I also checked to make sure that FontAwesome was being included and I see it in the page source.

    • This topic was modified 5 years, 8 months ago by genericname.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    5 years, 8 months ago

    What is the Font Awesome stylesheet URL you are using? You may be using v5 stylesheet URL while using the v4 font-family.

    This works for me when I put it in a Custom HTML block:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style amp-custom>
.hamburger:before {
  content: "\f0c9";
  font-family: FontAwesome;
  font-size: 25px;
}
</style>
<div class="hamburger"></div>

    Both AMP and non-AMP show me the hamburger icon.

    Note that it is expected for content:"\f0c9" in the source CSS to come out as content:"" in the minified CSS on AMP pages. This is merely because the escape sequence is serialized as the glyph character in UTF-8 by the PHP-CSS-Parser. This is also good thing because it reduces the number of bytes. The result is the same.

    Thread Starter genericname

    (@genericname)

    5 years, 8 months ago

    Hi Weston,

    I am using the same cdn as the example you posted above. This is what I see in the page source:

    <link crossorigin="anonymous" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=4.7.0" type="text/css" media="all">

    Hmm I just noticed that the icon will show up if I use the Font Awesome classes fa fa-bars instead of the unicode. Are there any reasons why it wouldn’t work with just the unicode?

    • This reply was modified 5 years, 8 months ago by genericname.
    Plugin Author Weston Ruter

    (@westonruter)

    5 years, 8 months ago

    I’m not sure. Please share a URL that has the problem.

    Thread Starter genericname

    (@genericname)

    5 years, 8 months ago

    The testing environment is unfortunately password protected. I will use the classes for now while looking more into this issue.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS content seems to gets stripped’ is closed to new replies.