Change the Share Icons to Images

Comments

1 comment

  • Official comment
    Avatar
    Jane Vance

    Answer from ShortStack Support: Using completely custom images is a bit involved. Try using the following CSS in your CSS Editor to replace the Facebook icon with an image:

    NOTE: You will need to change where it says "URL_HERE" with the URL for the image you want to use. We suggest uploading the image to our Media Manager: http://www.shortstackapp.com/member/assets then using the URL we provide for the image.

    /*Change Facebook icon to image*/
    .platform_facebook{
    background: url(URL_HERE)no-repeat;
    width:95px;/*Width of Image*/
    height:56px;/*Height of Image*/
    font-size:0px;
    display: inline-block;
    text-align:center;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    /*Change Twitter icon to image*/
    .platform_twitter{
    background: url(URL_HERE)no-repeat;
    width:95px;/*Width of Image*/
    height:56px;/*Height of Image*/
    font-size:0px;
    display: inline-block;
    text-align:center;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    /*Change manual share icon to image*/
    .platform_manual{
    background: url(URL_HERE)no-repeat;
    width:95px;/*Width of Image*/
    height:56px;/*Height of Image*/
    font-size:0px;
    display: inline-block;
    text-align:center;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    For older Campaigns not using the Style Panel: 

    The CSS for older Campaigns not using the Style Panel is as follows: 

    .fa.fa-facebook-square{
    background: url(URL_HERE)no-repeat;
    width:95px;/*Width of Image*/
    height:56px;/*Height of Image*/
    font-size:0px;
    display: inline-block;
    text-align:center;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    You will need to change where it says "URL_HERE" with the URL for the image you want to use. We suggest uploading the image to our Media Manager: http://www.shortstackapp.com/member/assets then using the URL we provide. Try this CSS for the Twitter icon:

    .fa.fa-twitter-square{
    background: url(URL_HERE)no-repeat;
    width:95px;/*Width of Image*/
    height:56px;/*Height of Image*/
    font-size:0px;
    display: inline-block;
    text-align:center;
    margin: 0px;
    border: 0px;
    padding: 0px;
    }

    The other icons use similar CSS.

Please sign in to leave a comment.