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>