content-special-shortcut

Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 10.4 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g><path fill="#FFF" d="M1 1v14h7V8h7V1H1z"/><path fill="#999" d="M1 1v14h7v-1H2V2h12v6h1V1H1z"/><path fill="#666" d="M3 3h10v2H3z"/><path fill="#B9B9B9" d="M3 6h10v1H3zM3 8h5v1H3zM3 10h5v1H3zM3 12h5v1H3z"/></g><g><path fill="#666" d="M9 9h7v7H9z"/><path fill="#FFF" d="M10 10h5v5h-5z"/><path fill="#212121" d="M11 13.115c0 .082.012.178.036.286.024.107.052.205.083.294.03.088.064.177.102.266.037.088.065.152.085.192l.043.085c.011.024.031.036.06.036a.078.078 0 0 0 .019-.002c.036-.011.052-.036.049-.072-.061-.568.014-.969.226-1.204a.882.882 0 0 1 .364-.234c.151-.057.34-.094.569-.113v.535c0 .06.028.102.083.126a.148.148 0 0 0 .053.011c.038 0 .07-.013.096-.04l1.091-1.091c.028-.029.041-.061.041-.098s-.013-.069-.04-.096l-1.091-1.091c-.041-.044-.091-.054-.149-.03a.128.128 0 0 0-.083.126v.558c-.584.04-1.009.197-1.276.471-.241.246-.361.608-.361 1.085z"/></g></svg>

Inline

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g><path fill="#FFF" d="M1 1v14h7V8h7V1H1z"/><path fill="#999" d="M1 1v14h7v-1H2V2h12v6h1V1H1z"/><path fill="#666" d="M3 3h10v2H3z"/><path fill="#B9B9B9" d="M3 6h10v1H3zM3 8h5v1H3zM3 10h5v1H3zM3 12h5v1H3z"/></g><g><path fill="#666" d="M9 9h7v7H9z"/><path fill="#FFF" d="M10 10h5v5h-5z"/><path fill="#212121" d="M11 13.115c0 .082.012.178.036.286.024.107.052.205.083.294.03.088.064.177.102.266.037.088.065.152.085.192l.043.085c.011.024.031.036.06.036a.078.078 0 0 0 .019-.002c.036-.011.052-.036.049-.072-.061-.568.014-.969.226-1.204a.882.882 0 0 1 .364-.234c.151-.057.34-.094.569-.113v.535c0 .06.028.102.083.126a.148.148 0 0 0 .053.011c.038 0 .07-.013.096-.04l1.091-1.091c.028-.029.041-.061.041-.098s-.013-.069-.04-.096l-1.091-1.091c-.041-.044-.091-.054-.149-.03a.128.128 0 0 0-.083.126v.558c-.584.04-1.009.197-1.276.471-.241.246-.361.608-.361 1.085z"/></g></svg>
    </span>
</span>

Sprite

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg role="img"><use xlink:href="dist/sprites/content.svg#content-special-shortcut" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="content-special-shortcut" size="small" />

CSS Background Image

.myclass {
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg%3e%3cpath fill='%23FFF' d='M1 1v14h7V8h7V1H1z'/%3e%3cpath fill='%23999' d='M1 1v14h7v-1H2V2h12v6h1V1H1z'/%3e%3cpath fill='%23666' d='M3 3h10v2H3z'/%3e%3cpath fill='%23B9B9B9' d='M3 6h10v1H3zM3 8h5v1H3zM3 10h5v1H3zM3 12h5v1H3z'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23666' d='M9 9h7v7H9z'/%3e%3cpath fill='%23FFF' d='M10 10h5v5h-5z'/%3e%3cpath fill='%23212121' d='M11 13.115c0 .082.012.178.036.286.024.107.052.205.083.294.03.088.064.177.102.266.037.088.065.152.085.192l.043.085c.011.024.031.036.06.036a.078.078 0 0 0 .019-.002c.036-.011.052-.036.049-.072-.061-.568.014-.969.226-1.204a.882.882 0 0 1 .364-.234c.151-.057.34-.094.569-.113v.535c0 .06.028.102.083.126a.148.148 0 0 0 .053.011c.038 0 .07-.013.096-.04l1.091-1.091c.028-.029.041-.061.041-.098s-.013-.069-.04-.096l-1.091-1.091c-.041-.044-.091-.054-.149-.03a.128.128 0 0 0-.083.126v.558c-.584.04-1.009.197-1.276.471-.241.246-.361.608-.361 1.085z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-content.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-content-special-shortcut;
}

Download

Download