Add social icon

  • Posted in : uCard
  • bentkimo
    Participant

    Hello,

    I would like to add a Product Hunt icon to my website. How can I perform this addition? Thank you!

    serkan
    Moderator

    Hi , You can watch these steps to create a custom icon.
    https://www.pixelwars.org/forums/topic/social-icon/
    Thanks

    bentkimo
    Participant

    Hello,

    I followed the instructions in the link you listed

    I added this code to the custom CSS section:

    `
    .social li a.tumblr { min-width: 37px; min-height: 37px; text-indent: -999em; background-image: url(“https://cdn0.iconfinder.com/data/icons/picons-social/57/76-producthunt-2-64.png”); background-repeat: no-repeat; background-position: center center; }
    `

    Screenshot: https://www.dropbox.com/s/n4ku9xpmvtnkrqt/Screenshot%202017-07-19%2013.10.37.png?dl=0

    The tumblr button still displays. What am I doing wrong? Thanks.

    You can see the site here: https://benjaminkimotwichell.com/

    Thank you!

    bentkimo
    Participant

    If I need to hardcode the change, please just direct me to which CSS file and line. Thanks.

    serkan
    Moderator

    Hi,
    This code does not seem to work because the structure of the Ucard is slightly different than the others. I’ll talk to Developer to see if we can find a better solution.
    Thanks

    bentkimo
    Participant

    Thank you!

    bentkimo
    Participant

    Hello ! Any news on this topic? Thank you.

    serkan
    Moderator

    Hi,
    I sent this topic to our developer. He will keep you updated.
    Thanks for your patience.

    bentkimo
    Participant

    Hi,

    Any news on this? It has been 8 weeks since I first posed the question.

    Thanks,
    Ben

    ahmetsali
    Keymaster

    Hi, update your code as;

    a.social-link.tumblr { text-indent: -999em;background-image: url("https://cdn0.iconfinder.com/data/icons/picons-social/57/76-producthunt-2-64.png") !important;background-repeat: no-repeat;background-position: center center;background-size: 22px 22px !important;}
    
    bentkimo
    Participant

    Thanks for your response! Could you instruct me where to put this code? File + line ideally. Thank you!

    ahmetsali
    Keymaster
    bentkimo
    Participant

    This did not have the desired effect. It replaced the instagram icon and the new logo was not styled the same as the others. It was black and not white. Also when I hovered it it got ~5x larger. Can you please advise? Thanks.

    serkan
    Moderator

    Hi, The Product hunt icon looks like this because the background is black. You wanted an extra icon that is not on our theme, we saved it as a picture. So we can not intervene in the color.You have to prepare it in the photoshop and save with opposite colors and upload them.

    uncultured
    Participant

    Hi, I’m a writer for the Huffington Post. I was hoping to add a HuffPost social icon to my website. My photoshop skills aren’t so great. How would I make and install a HuffPost social icon in the style of uCard? HuffPost’s old social icon was just the letter H in Times New Roman (thought their new one is a bit tricky).

    serkan
    Moderator

    Hi uncultured,
    Ahmet gave the custom css code above. You need to save the HuffPost social icon as an image and add its url with your custom CSS code.
    Thanks

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

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register