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

XF 1.5 Prefix with font awesome(How To)

Discussion in 'Styling and Customization Questions' started by ŽivaAkcija, Jan 1, 2016.

  1. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    How to, i know @Sheldon put tutorial to do it but this site is not work anymore!!
     
  2. Dadparvar

    Dadparvar Well-Known Member

  3. ŽivaAkcija

    ŽivaAkcija Well-Known Member

  4. Sunka

    Sunka Well-Known Member

    Something like this

    Code:
    /* Ljekovito */
    .ljekovito
        {
           background-color: #CAF7CA;
            border: 1px solid #72A585 !important;
            border-radius: 4px !important;
            box-shadow: 0 0 1px #F9F9F9 inset;
           color: #000000;
           display: inline-block;
           font-size: 12px;
           font-style: normal !important;
           font-weight: bold;
           line-height: 17px;
            padding: 0 6px;
        }
       
        .ljekovito:before
            {
                content: "\f0f9";
                font-family: FontAwesome;
                color: #000000;
                margin-right: 5px;
                font-weight: normal;
                font-size: 110%;
            }
           
            a.prefixLink:hover .ljekovito
                {
                    color: #000000;
                    background-color: #F7AE65;
                    border: 1px solid #333803 !important;
                }     
     
  5. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    i found it now i need option to change fontawesome with glyphs icon

    Code:
    .prefixPsi:before {
        content: "\f1b0";
        font-family: FontAwesome;
        padding-right: 4px;
    }
    
    .prefix.prefixPsi {
        background: none repeat scroll 0 0 rgb(83, 84, 53);
        border-color: #5d6977;
        border-radius: 4px;
        color: black;
    }
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    Then you need to call the "glyphs" icons as you do the FA ones, and then replace
    font-family: FontAwesome;
    with
    font-family: whatever_they_tell_you;
    If they are the images, then you will have to use another method (the FA method will not work).

    I personally just have my own font icons that I created and then load them locally from an include call in the EXTRA.css and use them instead of the CDN versions from FA or elsewhere.
     
  7. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    any example code?
     
  8. Tracy Perry

    Tracy Perry Well-Known Member

    for what? Using an image? I'm pretty sure that there are several examples (think some were even by Brogan) available. Here, give me a minute and I'll do the search for you.

    EDIT:
    Start here
    https://xenforo.com/community/resources/creating-custom-thread-prefix-css.350/
    then here
    https://xenforo.com/community/threads/inserting-an-image-into-thread-prefixes.83231/#post-827587
    then some more guidance here
    https://xenforo.com/community/threads/prefix-issue.59500/
    then here also
    https://xenforo.com/community/threads/custom-prefixes-with-images.39260/#post-433061
    and if wanting pure image then here
    https://xenforo.com/community/resources/replace-prefixes-with-images.1670/
     
  9. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    i got prefix with fontawesome and works but like i said so need code to replace fontawesome icon with glyphs icon.And i use this code in extra css.

    Code:
    .prefixPsi:before {
        content: "\f1b0";
        font-family: FontAwesome;
        padding-right: 4px;
    }
     
  10. Tracy Perry

    Tracy Perry Well-Known Member

    And as I explained to you... there are different ways to use the Glyphs icons.. either as images or as a font pack. You haven't been clear on which you are using.
    If using a font pack, I've explained to include a template.css that you create (you name it what you want) in your EXTRA.css and then use whatever parameters they give you. Since it's a paid font icon setup, I'm not going to go buy them to find out what the parameter is. They should have - if it's a font icon pack - given you an example styles.css (or whatever they may call it) with necessary CSS code in it that has to be called.
    If using one of Audentio's styles, you don't even have to use an include in the EXTRA.css, there is a field in the Style Properties that allows you to define multiple custom CSS templates to include.

    You should have a file that has similar to this in it
    Code:
    .glyphicon-asterisk:before {
      content: "\2a";
    }
    
    .glyphicon-plus:before {
      content: "\2b";
    }
    
    .glyphicon-euro:before {
      content: "\20ac";
    }
    
    .glyphicon-minus:before {
      content: "\2212";
    }
    
    .glyphicon-cloud:before {
      content: "\2601";
    }
    
    .glyphicon-envelope:before {
      content: "\2709";
    }
    
    .glyphicon-pencil:before {
      content: "\270f";
    }
    It should also have something similar to this at the top

    Code:
    @charset "UTF-8";
    
    @font-face {
      font-family: "icons-font";
      src:url("fonts/icons-font.eot");
      src:url("fonts/icons-font.eot?#iefix") format("embedded-opentype"),
        url("fonts/icons-font.woff") format("woff"),
        url("fonts/icons-font.ttf") format("truetype"),
        url("fonts/icons-font.svg#icons-font") format("svg");
      font-weight: normal;
      font-style: normal;
    
    }
    
    [data-icon]:before {
      font-family: "icons-font" !important;
      content: attr(data-icon);
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
      font-family: "icons-font" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    That is the file you need to put the text from in your custom defined CSS template you create.
     
    Last edited: Jan 3, 2016
  11. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    nope i use @Arty Graphite Style, thanks will try it
     
  12. Tracy Perry

    Tracy Perry Well-Known Member

    See the addendum to my post above on what to look for. it should have been a file supplied with the font icon pack.
    The bottom example is from a custom pack I use on my sites so it will not work with your icons.
     
  13. Stuart Wright

    Stuart Wright Well-Known Member

  14. rafass

    rafass Well-Known Member

    maszd likes this.
  15. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    i want do this with glyphs icon not fontawesome
     
  16. Tracy Perry

    Tracy Perry Well-Known Member

    Did you ever determine how you are loading glyphs icons? If in a font pack, then simply replace the font-family CSS designator with the one they provided you for the glyph icons.
     
  17. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    i try not work
     
  18. Tracy Perry

    Tracy Perry Well-Known Member

    That still doesn't answer the question I put to you. Are you using the glyph icons as images (you know, things that end in .png, .jpg, etc) or are you using actual font files (.eot, .woff, .woff2) that you downloaded. If the latter (font files) then you need to upload those to your server, put the data that they provided in the CSS sheet they gave you into your EXTRA.css (or do an include) then modify the CSS to call it be the font-family that they gave you.
     
  19. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    glyphs are included in my premium style, fontawesome to

    oie_8lw1N38bI64w.png
     
    Last edited: Jan 9, 2016
  20. Tracy Perry

    Tracy Perry Well-Known Member

    Then you should just be have to use the correct
    Code:
    content: "\????";
    font-family: Whatever_They_Called_The_Font_Family_In_Your_Style;
    If they didn't provide you with the font-family name that is being used, you need to use Chrome Developer Tools (or similar) to find out what the ones that ARE being displayed currently are using and then use that font-family name. Hopefully they also provided you with a list of the unicode's for the font pack. Because you will need them to put in the content: CSS segment.
    Since they are included in the style - have you asked the style author how to do it?
     

Share This Page