Blog Documentation Try Vanilla Cloud
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Adding Icon in Announcement

jobbatamjobbatam Batam New
in Vanilla 2.0 - 2.8

How add icon like this?

thank you all :+1:

Tagged:

Comments

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    Try this, you can replace the url to the image

    span.Tag.Tag-Announcement{
background-image: url('https://www.vanillaforums.org/plugins/EmojiExtender/emoji/little/+1.png');
background-repeat: no-repeat;
background-position:2px;
padding-left: 20px;
}

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • Options
    jobbatamjobbatam Batam New

    thanks mr @vrijvlinder
    Can i use font awesomeone?

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    Probably but you would need a different code try this see if it works

    span.Tag.Tag-Announcement::before{
content: "\f29b";
padding:2px;
margin-right: 3px;
}

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • Options
    jobbatamjobbatam Batam New

    @vrijvlinder said:
    Probably but you would need a different code try this see if it works

    span.Tag.Tag-Announcement::before{
content: "\f29b";
padding:2px;
margin-right: 3px;
}

    I tried this code, but icon not show, any suggestions?

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Did you install font awesome ? Coz it won't work unless you already have . If you don't have it go to the website and get it.

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • Options
    VanillaplusVanillaplus ✭

    @vrijvlinder said:
    Try this, you can replace the url to the image

    span.Tag.Tag-Announcement{
background-image: url('https://www.vanillaforums.org/plugins/EmojiExtender/emoji/little/+1.png');
background-repeat: no-repeat;
background-position:2px;
padding-left: 20px;
}

    is working fine.

  • Options
    jobbatamjobbatam Batam New

    @vrijvlinder said:
    Did you install font awesome ? Coz it won't work unless you already have . If you don't have it go to the website and get it.

    with add on or manually? where i need to start for install FA? i tried search in discussions but i don't found...

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2016

    Go to the Font Awesome website and get the information there. Font Awesome is not part of vanilla there is no add-on yet.

    Go to their website http://fontawesome.io/icons/ and read the documentation . It explains everything. or Google Font Awesome, or how to use Font Awesome? , or How does Font Awesome work ?

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

Sign In or Register to comment.