Skip to content

Instantly share code, notes, and snippets.

<div class="image">
image
</div>
.image {
text-indent: -9999px;
width: 100px;
height: 50px;
background-image: url("image.svg");
background-size: 100px 50px;
<div class="image">
image
</div>
.image {
text-indent: -9999px;
width: 100px;
height: 50px;
background-image: url("image.svg");
background-size: 100px 50px;
<body>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/>
</svg>
</body>
.icon {
width: 50px;
height 50px;
fill: red;
}
.icon:hover {
fill: blue;
}
<body>
<!-- svg file -->
<svg style="display: none;" aria-hidden="true">
<symbol id="icon-twitter" ...><path ...></path></symbol>
<symbol id="icon-instagram" ...><path ...></path></symbol>
</svg>
<!-- svg use case, twitter icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon-twitter">
<use xlink:href="#icon-twitter"></use>
var ajax = new XMLHttpRequest();
ajax.open("GET", "svg/sprite.svg", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
};
<body>
<!-- svg use case, twitter icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
<!-- svg use case, instagram icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon-instagram">
<use xlink:href="#icon-instagram"></use>
</svg>
.icon {
width: 50px;
height 50px;
fill: red;
}
.no-svg .icon {
background-image: url("icon.png");
background-repeat: no-repeat;
background-size: 50px 50px;
@ps-team
ps-team / canonical.cshtml
Created July 6, 2017 11:55
Canonical tagging in Contensis
@using Contensis.Framework.Web
@using Contensis.Framework.Web.Search
@using System.Collections
@using System.Collections.ObjectModel
@using System.Text.RegularExpressions;
@{
if (CurrentNode.Data.Property_SynchronisationSourceMasterContentID >= 0)
{
int masterPageContentID = CurrentNode.Data.Property_SynchronisationSourceMasterContentID;
Node masterPage = null;
@ps-team
ps-team / GetFileSizeWithSuffix.cshtml
Created October 27, 2017 08:03
Output file size for related documents and convert to KB, MB, GB etc
//Something like this
@{
var RelatedDocuments = CurrentNode.RelatedNodes("Related Documents");
}
@foreach(var item in RelatedDocuments) {
var itemSize = SizeSuffix(item.Size);
@itemSize