html addthis分享片段和prelim样式

Posted 2021-05-10

// horizontal share
.horizontal-share {
    margin-bottom: pxr(30);
    text-align: center;
    
    .custom_images {
        display: flex;
        align-items: center;
        justify-content: center;

        a {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 0;
            margin: 0 pxr(15);
            text-decoration: none;
            align-items: center;

            i:before {
                color: $pink;
            }

             &:hover {
                i:before {
                    color: darken($pink, 15%);
                }

            }

            svg {
                // default
                width: pxr(24);
                height: auto;
            }

            // fb is thinner
            &[title='Facebook'] {

                svg {
                    width: pxr(15);
                }

            }

        }

    }

}


<div class="horizontal-share">
    <div class="addthis_toolbox horizontal">
        <div class="custom_images">
            <a class="addthis_button_twitter" aria-label="Share this post on Twitter">
                <i aria-hidden="true" class="fab fa-twitter"></i>
            </a>
            <a class="addthis_button_facebook"  aria-label="Share this post on Facebook">
                <i aria-hidden="true" class="fab fa-facebook-f"></i>
            </a>
            <a class="addthis_button_linkedin" aria-label="Share this post on LinkedIn">
                <i aria-hidden="true" class="fab fa-linkedin-in"></i>
            </a>
            <a class="addthis_button_email" aria-label="Email this post">
                <i aria-hidden="true" class="fas fa-envelope"></i>
            </a>
            <a class="addthis_button_messenger" aria-label="Share this post on Facebook Messenger">
                <i aria-hidden="true" class="fab fa-facebook-messenger"></i>
            </a>
            <a class="addthis_button_slack" aria-label="Share this post on Slack">
                <i aria-hidden="true" class="fab fa-slack-hash"></i>
            </a>
        </div>
    </div>
</div>