Square outline social icons

Examples of square outline social icons

Text white # 

<div class="social-icon text-white si-square si-outline">
    <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 dark # 

<div class="social-icon text-dark si-square si-outline">
    <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 si-outline">
    <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 si-outline">
    <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 light # 

<div class="social-icon light-color si-square si-outline">
    <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 si-outline">
    <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>