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

M
  • Question Question
XF 2.2 How To Make a Prefix
Replies
1
Views
249
Paul B
Paul B
AndyB
Fixed Font Awesome icons not showing
2
Replies
27
Views
1K
Kier
Kier
workn1313
  • Solved
XF 2.2 Font Awesome icons don't work
Replies
3
Views
372
Mr Lucky
Mr Lucky
Ricsca
  • Question Question
XF 2.2 Style switcer
Replies
1
Views
560
TPerry
TPerry
oO5 Dynasty
  • Question Question
XF 2.2 Turned my logo into a font type, and wanted to implement it into xenforo.
Replies
3
Views
335
TPerry
TPerry
Top Bottom