Soundcloud social icon

  • Posted in : BookCard WP
  • jimclark509
    Participant

    How do I add Soundcloud as one of my social links? I’d like to have Soundcloud listed along with Twitter, Facebook, etc., on my Contact page.

    serkan
    Moderator

    Hi, soundcloud is not available in the icon packs we used. But you can add custom social icons with custom css, check this link;
    http://www.pixelwars.org/forums/topic/social-icon/
    This should also work for BookCard theme.

    You can replace an existing one with a different social icon via custom css. Let’s say, you are not using github social icon and you want to replace it with soundcloud icon;

     .social li a.github { min-width: 27; min-height: 28px; text-indent: -999em; background-image: url("http://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/soundcloud.png"); background-repeat: no-repeat; background-position: center; } 
    jimclark509
    Participant

    Thank you, that worked well. But how do I get the mouseover color to be orange instead of black? The Facebook icon mouseover is blue, YouTube is red, etc. But the Soundcloud one is black and I’d like it to be orange.

    serkan
    Moderator

    Hi it looks like orange, i think you already changed it. But this css is for soundcloud’s orange background color code;

    .social li a.github{ background-color: #F70; }
    jimclark509
    Participant

    Yes, I had just tried experimenting with the color when you were looking at it. Your color code is more correct than what I tried. Thank you for your help!

    serkan
    Moderator

    You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.

    bentham403
    Participant

    Hi Serkan, I want to creata a custom icon with an email link. Where can I create an icon? Should I create one with photoshop, upload it to my site and then use that link? Thanks

    serkan
    Moderator

    Hi @bentham403;
    You should save it as a background image so i would recommend you to create one with photoshop and upload it to your site and use it. :)
    Best wishes =)

    bentham403
    Participant

    But where are you hosting yours? as I can see there is one icon that matches perfectly to my inquiry. “pw-icon-mail-1”
    Thanks

    http://themes.pixelwars.org/photographer/wp-content/themes/photographer-wp/css/fonts/fontello/demo.html

    serkan
    Moderator

    Hi @bentham403;
    Where would you like yo put the mail icon and could you provide me related url and i will help you.

    bentham403
    Participant

    Hi @serkan, as I have the twitter, vimeo and instragram icon in the botton of my site I want to have another social icon with the mail logo that I sent you. I tried to find it in the documentation but that logo is not there.
    This is my site: http://ajramirez.com

    Thanks.

    serkan
    Moderator

    Hi @bentham403;
    You can use this shortcode for the footer widget area
    [social_icon type="mail-1" url="#"]
    and this custom css code;

    .social li a.mail-1:before { content: '\e87e' }

    Thanks

    bentham403
    Participant

    Thanks @serkan, that works perfect but what should I put in the url space in order to link the button to the default mail app? and where could I change the hover color? Thanks

    serkan
    Moderator

    Hi @bentham403;
    You can give your url like that;
    url=”mailto:webmaster@example.com”
    Hover background color custom css code;

    .social li a.mail-1:hover { background-color: #ccc; }

    Thanks

    DroidBoy
    Participant

    Allright, i tried what your wrote here with using one i dont use. I tried github, too. But it didnt work.

    I made it work using
    .social li a.github:hover { background-color: #32fc8d } instead.

    There was no hover in your code above, so it was green in my case all the time.

    Thanks anyway, led me to the right path! :-)

    serkan
    Moderator

    Thanks for the feedback

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