locked
how to resolve non-display of content property RRS feed

  • Question

  • User248267340 posted

    I have a CSS file with lots of settings for the content property. Most often, I'll see something like:

    .blockquote:before {

    content: '\f10d';

    }

    However, the symbol doesn't show when rendered. I thought there was a setting or link or something I would need to put in

    to the <head> area of the HTML so it would resolve. Its not Fontawesome. I thought it was something like indicating an extended character set, or

    something.

    Is there a way to get these symbols to show without fontawesome?

    Tuesday, October 15, 2019 6:29 PM

Answers

  • User475983607 posted

    Unfortunately, you have not provided enough source code for the community to reproduce your specific issue.  I use the same CSS Pseudo-Element method and it works for me.  The Font Awesome reference documentation explains how to do this; https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

    Below is a tested and working example using Font Awesome 5.

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
        <style>
            .icon::before {
                display: inline-block;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
    
            .login::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f007";
            }
    
            .tps::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 400;
                content: "\f1ea";
            }
    
            .twitter::before {
                font-family: "Font Awesome 5 Brands";
                content: "\f099";
            }
        </style>
    </head>
    <body>
        <ul style="margin: 0;">
            <li><span class="icon login"></span> Login</li>
            <li><span class="icon tps"></span> TPS Reports</li>
            <li><span class="icon twitter"></span> Twitter</li>
        </ul>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 17, 2019 5:59 PM

All replies

  • User303363814 posted

    What symbol are you expecting to see?

    Tuesday, October 15, 2019 10:31 PM
  • User248267340 posted

    Thanks for your response. Maybe I'm asking it incorrectly.

    I have a link in the <head> pointing to the full fontawesome product. In addition, my CSS uses the content property for all kinds

    of \f symbols, like "\f10d".

    However, all I'm getting is a rectangular box that displays the literal backslash, the literal f, the literal 1, the literal 0, and the literal d.

    I assumed I would need a link reference to an extended character set. But maybe I'm wrong.

    So I should ask it this way:

    My content properties are not being rendered. What can I research?

    Tuesday, October 15, 2019 11:03 PM
  • User288213138 posted

    Hi coreysan,

    About how to use fontawesome icons by their CSS content values you can refer to this link:

    http://astronautweb.co/snippet/font-awesome/

    But I suggest you use the icon directly.

    The code:

    <script src="all.js"></script>   //If you are not sure which link to reference, you can use all directly
    <i class="fas fa-quote-left"></i>

    The result:

    Best regards,

    Sam

    Wednesday, October 16, 2019 8:11 AM
  • User248267340 posted

    Thanks Sam. I'm trying to see if I can get this working without re-writing the code to include <i class="fas"</i> etc.

    Right now I have this link in the <head>:

    <link rel="stylesheet" href="css/fontawesome/css/fontawesome-all.min.css" />

    I also have the folders for all the css files and webfonts related to the fontawesome product.

    And yet none of the images will render.

    What can I research?

    Wednesday, October 16, 2019 7:59 PM
  • User303363814 posted

    Is this correct?

    "I don't want to use FontAwesome the way the creators tell me to for no apparent reason but I want something to display and I refuse to tell you what it is."

    Why not use FontAwesome the way the creators tell you?  What is the  real problem?

    Wednesday, October 16, 2019 9:27 PM
  • User288213138 posted

    Hi coreysan,

    And yet none of the images will render.

    Please use F12 to check if there are errors in the console?

    If not, please show me your complete code.

    Best regards,

    Sam

    Thursday, October 17, 2019 1:26 AM
  • User753101303 posted

    Hi,

    Not crystal clear. My understanding is that you want to show a unicode character from some font rather than using fontawesome at least here ???

    Which font are you using ? You checked possibly using https://en.wikipedia.org/wiki/Character_Map_(Windows) that you do have this character in the font you are using?

    Edit: or double check you are using "real" quotes characters ? I woulkd expect nothiing that the literal content if the character is really missing.

    Thursday, October 17, 2019 2:06 AM
  • User248267340 posted

    Again, Patrice and Sam, thanks so much for responding. I'm just trying to learn something here that I admit is a little fuzzy to me.

    1. My html contains links to about 8 css files, then a link to this: <link rel="stylesheet" href="css/fontawesome/css/fontawesome-all.css" />
    2. In my project, I have a folder for fontawesome css files and a corresponding webfonts folder with a plethora of eot, woff, svg, ttf, etc. files.
    3. I have some html code like this: <div class="nav"><i class="fa fa-bars"></i>
    4. I also have other lines of code like this: <div class="searchform"></div>
    5. The css for #4 is this: .themeform.searchform div:after
      {
      color:#ccc;
      line-height:1.714em;
      font-size:.875em;
      content:"\f002";
      ;
      left:10px;
      top:6px;
      font-family: "Font Awesome 5 Free";
      }
    6. In both scenarios (#3, #4) when the code is rendered I do not actually see the image. All I get is a rectangle with the literal characters, e.g., "\f002" showing.
    7. I checked all my paths and folders, and they look correct to me.
    8. I checked the css class properties to make sure they reference the right font-family as well.

    I can't get the images to show.

    Since I'm using a work computer, it's quite possible that something isn't initialized correctly. My job is required to observe Hipaa security rules, so maybe the IT team locked me out of something, or didn't install a full framework for me, or limited my access to the internet, or something else.

    But I thought I'd through this out there, hoping that maybe someone has had a similar experience and can say something like,

    "Oh yeah, that's because free fontawesome files only display certain images until you give them money." Or, "Yeah, you need the html to reference

    an extended utf-8 character set." Or something like that.

    Please don't spend much time on this - I will take the project home and run it on my personal PC, and see if there's any kind of problem. I can't help but wonder

    if my work PC has some unknown restrictions. But that's just a guess! F12 doesn't tell me anything useful.

    Thursday, October 17, 2019 4:06 PM
  • User475983607 posted

    Unfortunately, you have not provided enough source code for the community to reproduce your specific issue.  I use the same CSS Pseudo-Element method and it works for me.  The Font Awesome reference documentation explains how to do this; https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

    Below is a tested and working example using Font Awesome 5.

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
        <style>
            .icon::before {
                display: inline-block;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
    
            .login::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f007";
            }
    
            .tps::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 400;
                content: "\f1ea";
            }
    
            .twitter::before {
                font-family: "Font Awesome 5 Brands";
                content: "\f099";
            }
        </style>
    </head>
    <body>
        <ul style="margin: 0;">
            <li><span class="icon login"></span> Login</li>
            <li><span class="icon tps"></span> TPS Reports</li>
            <li><span class="icon twitter"></span> Twitter</li>
        </ul>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 17, 2019 5:59 PM
  • User-474980206 posted

    This is what the browser debug tools are for. You should be able to check if the fonts loaded, and for the mis-displayed char, what font is used.

    Thursday, October 17, 2019 6:22 PM
  • User248267340 posted

    MGebhard,

    Thanks so much! Your example confirmed that I coded properly.

    After several tests, the solution was so simple it didn't occur to me for several days:

    Some of the \f property values must have been deprecated. I could never get "\f002" and "\f450" to display,

    but once I changed the content value to "\f1ea" it worked perfectly.

    So that's all it was!

    You all have been such great help - next time I'll include a much better code example too!

    Thursday, October 17, 2019 6:39 PM