html 字体真棒社交链接

Posted 2021-05-11

.menu {
    li {
        a {
            font-size: 0;
            display: inline-block;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;

            &:before {
                font: normal normal normal 14px/1 FontAwesome;
            }
        }

        &.twitter {
            a:before {
                content: "\f099";
            }
        }

        &.facebook {
            a:before {
                content: "\f09a";
            }
        }

        &.pinterest {
            a:before {
                content: "\f231";
            }
        }

        &.google-plus {
            a:before {
                content: "\f0d5";
            }
        }
    }
}

<ul class="menu">
    <li class="twitter"><a href="#">Twitter</a></li>
    <li class="facebook"><a href="#">Facebook</a></li>
    <li class="pinterest"><a href="#">Pinterest</a></li>
    <li class="google-plus"><a href="#">Google Plus</a></li>
</ul>