.svg-servicestack
.svg-apple
.svg-twitter
.svg-github
.svg-google
.svg-facebook
.svg-microsoft
.svg-linkedin
<button class="btn btn-block btn-social btn-twitter"> <i class="fab fa-twitter"></i> </button>
<button class="btn btn-social-icon btn-twitter"> <i class="fab fa-twitter"></i> </button>
<i class="svg-twitter svg-{size}"></i>
<img src="{{'twitter'.svgDataUri()}}">
<img src="{{'twitter'.svgDataUri('#e33')}}">
{{ 'twitter'.svgImage('#e33') }}
{{ 'twitter'.svgImage() }}
.svg-bg { {{'twitter'.svgBackgroundImageCss()}} }
<img src="@Html.SvgDataUri("twitter")">
<img src="@Html.SvgDataUri("twitter","#e33")">
@Html.SvgImage("twitter")
@Html.SvgImage("twitter", "#e33")
.svg-bg-example { width: 150px; height: 150px; background-size: 142px 142px; background-position: 4px 4px; background-repeat: no-repeat; @Html.SvgBackgroundImageCss("female") }
.svg-male
.svg-female
.svg-male-business
.svg-female-business
.svg-male-color
.svg-female-color
.svg-users
<button class="btn btn-block btn-social btn-male"> <i class="fab fa-male"></i> </button>
<button class="btn btn-social-icon btn-male"> <i class="fab fa-male"></i> </button>
<i class="svg-male svg-{size}"></i>
<img src="{{'male'.svgDataUri()}}">
<img src="{{'male'.svgDataUri('#e33')}}">
{{ 'male'.svgImage('#e33') }}
{{ 'male'.svgImage() }}
.svg-bg { {{'male'.svgBackgroundImageCss()}} }
<img src="@Html.SvgDataUri("male")">
<img src="@Html.SvgDataUri("male","#e33")">
@Html.SvgImage("male")
@Html.SvgImage("male", "#e33")