XF 1.5 Prefix with font awesome(How To)

Sort by date Sort by votes
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;
            }
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
ŽivaAkcija said:
any example code?
Click to expand...
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/
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
ŽivaAkcija said:
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.
Click to expand...
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:
Upvote 0 Downvote
Perfectly possible ONLY with simple lines of CSS like:
ŽivaAkcija said:
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;
}
Click to expand...
cxf_prefixes-gif.124380

Other tutorial:
https://xenforo.com/community/resources/cxf-thread-prefix-with-font-awesome-icons.4340/
 
Upvote 0 Downvote
ŽivaAkcija said:
i try not work
Click to expand...
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.
 
Upvote 0 Downvote
ŽivaAkcija said:
glyphs are included in my premium style, fontawesome to
Click to expand...
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?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

zoldos
  • Question Question
XF 2.2 issue with Font Awesome icons NOT working on several areas of my forum!
Replies
0
Views
50
zoldos
zoldos
Fred.
  • Question Question
XF 2.3 How to add space after custom font awesome node icon?
Replies
2
Views
38
Fred.
Fred.
KSA
  • Question Question
XF 2.2 Any help here with font awesome for follow/unfollow switcher?
Replies
0
Views
261
KSA
KSA
Sparkiller
  • Solved
XF 2.2 Font Awesome - How to use Light, Thin, etc. versions?
Replies
3
Views
996
Kirby
K
R
  • Question Question
How do you deal with SMART Russian bots? Any tips? Banning Russian IPs didn't do anything, because they learned how to use VPNs from European and US.
2
Replies
21
Views
2K
GW2
GW2
Back
Top Bottom