1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 FontAwsome/Fontello Node Icons

Discussion in 'Styling and Customization Questions' started by HazedOff, May 21, 2015.

  1. HazedOff

    HazedOff Member

    So I've created some custom fontawesome icons with fontello here's the CSS im trying to use in extra.css to get the node icons to work;

    Code:
    /* FONT AWESOME NODE ICONS */
    
    @font-face
    
    {
    
            font-family: 'FontAwesome';
    
            src: url('./fonts/slick.eot');
    
            src: url('./fonts/slick.ttf') format("truetype"),
    
                    url('./fonts/slick.woff') format('woff'),
    
                    url('./fonts/slick.eot?#iefix') format('embedded-opentype'),
    
                    url('./fonts/slick.svg#fontawesome-webfont') format('svg');
    
            font-style: normal;
    
            font-weight: normal;
    
    }
    
    
    .node.node_6 .forumNodeInfo .nodeIcon:after, .node.node_6 .categoryForumNodeInfo .nodeIcon:after
    
    {
    
        font-family: "FontAwesome";
    
        font-size: 34px;
    
        content: "icon-lightbulb-alt”;
    
        padding: 4px;
    
    }
    
    
    .node.node_44 .forumNodeInfo.unread .nodeIcon:after, .node.node_4 .categoryForumNodeInfo.unread .nodeIcon:after
    
    {
    
        font-family: "FontAwesome";
    
        font-size: 34px;
    
        content: "icon-megaphone";
    
        padding: 4px;
    
    }
    
    
    /* FONT AWESOME NODE ICONS */
    
    I'm aware this is wrong and I should be instead applying this tag;

    Code:
    <i class="fa icon-megaphone"></i>
    to replace the node icons the issue is I can't find where the HTML for each individual node icon would be can anyone help me out?
     
  2. TJA

    TJA Well-Known Member

    Code:
    .node_44 .nodeIcon:before {
        content: "\f0a1";
        font-family: FontAwesome;
        font-size: 34px;
    }
    upload_2015-5-21_21-34-25.png
    If you don't have Font Awesome installed then go to your PAGE_CONTAINER template and add this after <head>
    Code:
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     
  3. Demon

    Demon Active Member

    Out of curiosity, how do you find the content part("\f0a1") of font awesome icons?
     
    Last edited: May 22, 2015
  4. teletubbi

    teletubbi Active Member

    On the homepage of font awesome.
    There is a sheet with all icons and codes.
     
  5. Demon

    Demon Active Member


    My bad. I couldn't see the small text that said it.
     
    Last edited: May 22, 2015
  6. rafass

    rafass Well-Known Member

    just use "\fxxx" in the css.
    example:
    Code:
    .logged i.fa.fa-user:after {
       font-family: FontAwesome!important;
        content: "\f005"!important;
        position: absolute;
        etc, etc...
    }
     
  7. Demon

    Demon Active Member

    What about pages? What would you do?
     
  8. TJA

    TJA Well-Known Member

    A line from a page
    Code:
    <i class="fa fa-exclamation-triangle fa-lg"></i> No refunds will be made relating to site donations.<br>
    upload_2015-5-22_12-49-2.png
     
    Demon likes this.
  9. rafass

    rafass Well-Known Member

Share This Page