Customise a css entry

Discussion in 'XenForo' started by DaveL, Jun 6, 2019.

  1. DaveL

    DaveL Habitué

    1,304
    732
    +191
    Hi everyone,

    This is my css:
    Can anyone advise how I could make this look like a banner with a FA icon at the front? Or failing that, just to add a FA icon.

    I've spent the past 45 minutes trawling XF and testing and trying things, but to no avail.
     
  2. PoetJC

    PoetJC ⚧ Jacquii: Black Kween of Transition ⚧

    21,301
    1,497
    +5,295
    Code:
    .view-block:before {
    font-family: "FontAwesome";
    content: "\f09a";
    }
    That code would show the Facebook Font Awesome icon before the view-block text.
    You'll need to use padding-right attribute as appropriate to the font size to add padding so the FA icon doesn't obscure the text.
    HTH,

    J.
     
  3. DaveL

    DaveL Habitué

    1,304
    732
    +191
    Thanks PoetJCPoetJC .
    Tried that but no joy i'm afriad. Will keep tinkering :D
     
  4. PoetJC

    PoetJC ⚧ Jacquii: Black Kween of Transition ⚧

    21,301
    1,497
    +5,295
    DaveLDaveL if you can link to the exact section on your forum where you want the code placed- I'd be happy to share the correct code for you.
    Cheers.

    J.
     
  5. Dermot

    Dermot Aspirant

    22
    8
    +10
    If you use 2.0, 2.1 Xenforo, it uses Font awesome 5, not 4 so may not show icon right.
     
    • Like Like x 1
    • Agree Agree x 1
    • List
  6. DaveL

    DaveL Habitué

    1,304
    732
    +191
  7. PoetJC

    PoetJC ⚧ Jacquii: Black Kween of Transition ⚧

    21,301
    1,497
    +5,295
    Okay... Same principle as the earlier post I made. The following code:

    Code:
    .viewsignature-block:before {
        font-family: 'Font Awesome 5 Pro';
        font-size: inherit;
        font-style: normal;
        font-weight: 300;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: "\f004";
    }
    ... will output:
    2019-06-14_5-18-00.png


    You'd need to apply a class to the actual link in order to get the FA icon as part of the clickable link though.
    Kinda like so:

    HTML:
    <div class="viewsignature-block">
    <a href="/members/pit1024.6557/viewsignature" data-xf-click="overlay" style="outline-width: 0px !important; user-select: auto !important;" class="signature-icon"><b>View My Signature</b></a>           
    </div>
    Where the link class is 'signature-icon' ... Use the following .css code addition:

    Code:
    .signature-icon:before {
        font-family: 'Font Awesome 5 Pro';
        font-size: inherit;
        font-style: normal;
        font-weight: 300;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: "\f004";
    }
    Of course - depending on the theme - you may need to apply some padding and/or margins so that the icon doesn't overlap links or text.
    HTH,

    J.
     
    • Like Like x 1
    • Appreciation Appreciation x 1
    • List
  8. DaveL

    DaveL Habitué

    1,304
    732
    +191
    Thank you so much PoetJCPoetJC

    I've added some padding back in, but it doesn't seem to be working. Have I added it to the right place?

    Code:
    .viewsignature-block:before {
        padding-top: 20px;
        font-family: 'Font Awesome 5 Pro';
        font-size: inherit;
        font-style: normal;
        font-weight: 300;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: "\f004";
    }
     
  9. Dermot

    Dermot Aspirant

    22
    8
    +10
    Not sure why you're adding padding to the top...but if you just want it on the blocks link, just use..

    Code:
    .viewsignature-block a::before {
        font-family: 'Font Awesome 5 Pro';
        content: '\f004';
        padding-right: 10px;
    }
     
  10. DaveL

    DaveL Habitué

    1,304
    732
    +191
    Because I need to move it down from the rest of the text.
     
  11. Dermot

    Dermot Aspirant

    22
    8
    +10
    Padding is not what you should be using, it should be css positioning [info]

    I'll have a look at it when i get to the pc and see what the blocks trying to do.
     
Verification:
Draft saved Draft deleted
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.