Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 24, 2014 at 2:23 pm #214408
    David Verburg

    Hi there,

    I have integrated the icon list in one of our pages. Love the looks, but want to replace the star in the grey circle (fontello icon) for our logo. Is there a quick css or custom.css code like with the shortline? This is the page: http://www.cadeaugolf.nl/golfballen-bedrukken. Maybe with a .png file?

    Thanks.

    David

    January 25, 2014 at 4:47 am #214718
    Ismael

    Hi David!

    Please add this on Quick CSS or custom.css:

    .avia-icon-list-container.avia-builder-el-6.el_after_av_textblock.avia-builder-el-last .iconlist_icon {
background: url('http://www.cadeaugolf.nl/wp-content/uploads/2013/04/image_rl2.png') no-repeat center center;
background-size: 40px 40px;
}

.avia-icon-list-container.avia-builder-el-6.el_after_av_textblock.avia-builder-el-last .iconlist-char {
display: none;
}

    Best regards,
    Ismael

    January 25, 2014 at 1:06 pm #214794
    David Verburg

    Hi Ismael,

    Thanks for your reply. It doesn’t work though. First icons don’t show. Second block show the start icons: http://www.cadeaugolf.nl/golfballen-bedrukken

    Regards,
    David

    January 28, 2014 at 10:53 am #215723
    Dude

    Hi!

    Please revert Ismaels change and use following code instead

    
#av_section_3 .iconlist_icon [data-av_icon]:before {
content: url('http://www.cadeaugolf.nl/wp-content/uploads/2013/04/image_rl2.png');
}

    You probably need to upload a smaller version of your logo – the current image ( http://www.cadeaugolf.nl/wp-content/uploads/2013/04/image_rl2.png ) is too big.

    If you want to replace the icons of all icon lists (entire website) use following code

    
.iconlist_icon [data-av_icon]:before {
content: url('http://www.cadeaugolf.nl/wp-content/uploads/2013/04/image_rl2.png');
}

    Best regards,
    Peter

    January 28, 2014 at 1:24 pm #215753
    David Verburg

    Hi Peter,

    I have used quick .css on your code and tried it in custom.css. Doesn’t load the logo nor the small logo (http://www.cadeaugolf.nl/wp-content/uploads/2014/01/logotiny.jpg)

    Besides: the first code from Ismael removed the first icons. See http://www.cadeaugolf.nl/golfballen-bedrukken

    Regards,
    David

    January 28, 2014 at 1:26 pm #215754
    David Verburg

    This is the code I used in custom.css

    .iconlist_icon [data-av_icon]:before {
    content: url('http://www.cadeaugolf.nl/wp-content/uploads/2014/01/logotiny.jpg');
    }

    Regards,

    David

    January 29, 2014 at 12:46 am #216134
    Josue

    Hi David!

    The URL of your image is wrong, try with this code:

    .iconlist_icon [data-av_icon]:before {
content: url('http://www.cadeaugolf.nl/wp-content/uploads/2014/01/logotiny.jpg');
}

    Regards,
    Josue

    January 29, 2014 at 10:59 am #216306
    David Verburg

    Thanks. That works. In a color section the white circle turns dark grey however: http://www.cadeaugolf.nl/trex-tour. Can I add a code to make it white or a custom color (on all pages)?

    January 29, 2014 at 3:52 pm #216401
    David Verburg

    First logo’s don’t show due to the first quick css code from Ismael. How can I correct that? http://www.cadeaugolf.nl/golfballen-bedrukken

    January 29, 2014 at 5:31 pm #216487
    Josue

    Hey!

    Have you tried removing it? this part:

    .avia-icon-list-container.avia-builder-el-6.el_after_av_textblock.avia-builder-el-last .iconlist-char {
display: none;
}

    Cheers!
    Josue

    January 29, 2014 at 5:44 pm #216498
    David Verburg

    I used Ismaels code in quick css. Your code I have put in custom.css (ftp). Can’t remove it. When I clone the Icon list they both work (original and clone). When I put it on another place too. When I put it in the same place, it doesn’t show the logo.

    Regards,

    David

    January 29, 2014 at 5:45 pm #216501
    Josue

    Well, in that case, add this code too:

    .avia-icon-list-container.avia-builder-el-6.el_after_av_textblock.avia-builder-el-last .iconlist-char {
display: none !important;
}

    That will fix it.

    Cheers!
    Josue

    January 29, 2014 at 6:27 pm #216534
    David Verburg

    Thanks. That worked fine! Do you have a code to too alter the color of the circle when place in a color section? See http://www.cadeaugolf.nl/trex-tour (red underground, I want to customize it in to grey or white).

    January 29, 2014 at 6:31 pm #216536
    Josue

    Hi!

    This will do it:

    .socket_color .avia-icon-list .iconlist_icon {
    background: white;
}

    Best regards,
    Josue

    January 29, 2014 at 6:45 pm #216541
    David Verburg

    Houston, we got ourselves a winner! Thanks guys. Amazing service!!

    January 29, 2014 at 6:51 pm #216543
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘how to replace an fontello Icon for an own customized icon’ is closed to new replies.