Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 12, 2019 at 12:28 pm #1118050
    Zatara

    I am trying to add 5 stars – icons with this css code. I am able to insert words, but not icons. Please improve this code.

    
.comment-header::after {
  content: " any words here is working ";
}

    The following are not working
    <span class=’av-icon-char’ aria-hidden=’true’ data-av_icon=’’ data-av_iconfont=’entypo-fontello’ ></span>

    [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='left' animation='' color='#ffd900' av_uid='' admin_preview_bg=''][/av_font_icon]

    July 13, 2019 at 9:54 pm #1118403
    Mike

    Hey simran1982,
    Thanks for the url and code, it looks like the icon you are using is a single star, did you want 5 stars in a row? Would you want to use a single custom icon instead?
    Here is an example of the CSS you can use to add the stars:

    .comment-header::after {
  content: url('https://img.icons8.com/ios-glyphs/30/F1C40F/5-star-hotel.png');
display: inline;
}
.comment-header .comment-meta.commentmetadata {
display: inline !important;
}

    Best regards,
    Mike

    July 13, 2019 at 10:20 pm #1118408
    Guenni007

    if you want to use a entypo-fontello font icon put in like that:
    instead of the u in ue808 there must be a backslash.

    .comment-header::after {
  content: "\e808";
font-familiy: entypo-fontello;
…
}

    if you are using win keyboards the back-slash got his own sign on keyboard
    on mac keyboard you will find the backslash on :
    ⇑ ⌥ 7 : shift alt 7
    (Alt could be named option key)

    • This reply was modified 5 years, 4 months ago by Guenni007.
    July 14, 2019 at 6:24 am #1118453
    Rikard

    Hi,

    Thanks for sharing and for helping out @guenni007.

    Best regards,
    Rikard

    July 15, 2019 at 10:10 am #1118718
    Zatara

    Thanks for the replies. I want 5 stars in one single block

    July 15, 2019 at 10:11 am #1118720
    Zatara

    Yes i want to use those only. But 5 stars in a row

    July 16, 2019 at 1:57 am #1119011
    Ismael

    Hi,

    Thank you for the update.

    Looks like you’ve managed to add the star icons. It’s in the top rated section. Is that what you need?

    Best regards,
    Ismael

    July 16, 2019 at 4:25 am #1119024
    Zatara

    No. I have done it manually. Not with css. Please read initial posts. I want 5 stars to be shown with all commentator names.

    July 16, 2019 at 6:27 pm #1119232
    Victoria

    Hi simran1982,

    Then it might be easier to make an image and add it in the :content field.

    Best regards,
    Victoria

    July 17, 2019 at 7:54 am #1119435
    Zatara

    Please give me icons code
    I dont know how to edit the above CSS to include 5 stars

    July 17, 2019 at 8:27 am #1119449
    Zatara

    I got it with little experiments. The following code you provided worked. Thanks a lot

    
.comment-header::after {
  content: url('https://img.icons8.com/ios-glyphs/30/F1C40F/5-star-hotel.png');
display: inline;
}
.comment-header .comment-meta.commentmetadata {
display: inline !important;
}
    July 17, 2019 at 10:54 am #1119491
    Rikard

    Hi,

    Great, I’m glad that you got it working and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.