Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1118050

    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]

    #1118403

    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

    #1118408

    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 1 week ago by  Guenni007.
    #1118453

    Hi,

    Thanks for sharing and for helping out @guenni007.

    Best regards,
    Rikard

    #1118718

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

    #1118720

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

    #1119011

    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

    #1119024

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

    #1119232

    Hi simran1982,

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

    Best regards,
    Victoria

    #1119435

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

    #1119449

    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;
    }
    
    #1119491

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.