Square shape social icons

Examples of square shape outline social icons

Text dark #

<div class="social-icon text-dark si-square">
    <ul class="list-inline">
        <li class="list-inline-item">
            <a target="_blank" title="Twitter" href="#">
                <i class="fab fa-twitter">
                </i>
                <span>Twitter</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Facebook" href="#">
                <i class="fab fa-facebook-f">
                </i>
                <span>Facebook</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Google plus" href="#">
                <svg class="icon icon-google-plus-symbol">
                    <use xlink:href="#icon-google-plus-symbol"></use>
                </svg>
                <span>Google plus</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Instagram" href="#">
                <svg class="icon icon-instagram">
                    <use xlink:href="#icon-instagram"></use>
                </svg>
                <span>Instagram</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Rss" href="#">
                <i class="fas fa-rss"></i>
                <span>Rss</span>
            </a>
        </li>
    </ul>
</div>

Text primary #

<div class="social-icon primary-color si-square">
    <ul class="list-inline">
        <li class="list-inline-item">
            <a target="_blank" title="Twitter" href="#">
                <i class="fab fa-twitter">
                </i>
                <span>Twitter</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Facebook" href="#">
                <i class="fab fa-facebook-f">
                </i>
                <span>Facebook</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Google plus" href="#">
                <svg class="icon icon-google-plus-symbol">
                    <use xlink:href="#icon-google-plus-symbol"></use>
                </svg>
                <span>Google plus</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Instagram" href="#">
                <svg class="icon icon-instagram">
                    <use xlink:href="#icon-instagram"></use>
                </svg>
                <span>Instagram</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Rss" href="#">
                <i class="fas fa-rss"></i>
                <span>Rss</span>
            </a>
        </li>
    </ul>
</div>

Text gray #

<div class="social-icon gray-color si-square">
    <ul class="list-inline">
        <li class="list-inline-item">
            <a target="_blank" title="Twitter" href="#">
                <i class="fab fa-twitter">
                </i>
                <span>Twitter</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Facebook" href="#">
                <i class="fab fa-facebook-f">
                </i>
                <span>Facebook</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Google plus" href="#">
                <svg class="icon icon-google-plus-symbol">
                    <use xlink:href="#icon-google-plus-symbol"></use>
                </svg>
                <span>Google plus</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Instagram" href="#">
                <svg class="icon icon-instagram">
                    <use xlink:href="#icon-instagram"></use>
                </svg>
                <span>Instagram</span>
            </a>
        </li>
        <li class="list-inline-item">
            <a target="_blank" title="Rss" href="#">
                <i class="fas fa-rss"></i>
                <span>Rss</span>
            </a>
        </li>
    </ul>
</div>

Text origin #

<div class="social-icon origin-color si-square">
    <ul class="list-inline">
        <li class="list-inline-item si-facebook">
            <a target="_blank" title="Facebook" href="#">
                <i class="fab fa-facebook-f">
                </i>
                <span>Facebook</span>
            </a>
        </li>
        <li class="list-inline-item si-twitter">
            <a target="_blank" title="Twitter" href="#">
                <i class="fab fa-twitter">
                </i>
                <span>Twitter</span>
            </a>
        </li>
        <li class="list-inline-item si-google">
            <a target="_blank" title="Google plus" href="#">
                <svg class="icon icon-google-plus-symbol">
                    <use xlink:href="#icon-google-plus-symbol"></use>
                </svg>
                <span>Google plus</span>
            </a>
        </li>
        <li class="list-inline-item si-tumblr">
            <a target="_blank" title="Tumblr" href="#">
                <i class="fab fa-tumblr"></i>
                <span>Tumblr</span>
            </a>
        </li>
        <li class="list-inline-item si-rss">
            <a target="_blank" title="RSS" href="#">
                <i class="fas fa-rss"></i>
                <span>RSS</span>
            </a>
        </li>
    </ul>
</div>
HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download