• 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)

Sunka

Well-known member
#4
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;
            }
 

ŽivaAkcija

Well-known member
#5
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;
}
 

Tracy Perry

Well-known member
#6
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.
 

Tracy Perry

Well-known member
#8
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/
 

ŽivaAkcija

Well-known member
#9
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;
}
 

Tracy Perry

Well-known member
#10
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.
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:

rafass

Well-known member
#14

Tracy Perry

Well-known member
#18
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.
 

Tracy Perry

Well-known member
#20
glyphs are included in my premium style, fontawesome to
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?