apps-pagetree-page-frontend-user-hideinmenu

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 opacity=".5"><path fill="#EFEFEF" d="M2 0v16h12V4l-4-4H2z"/><path fill="#FFF" d="M10 4V0l4 4h-4z" opacity=".65"/><path fill="#212121" d="M13 5v5L9 5h4z" opacity=".2"/><path fill="#999" d="M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z"/></g><g><path fill="#666" d="M10.725 5h-.45C8.818 5 7.588 6.205 7.588 7.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C6.135 12.059 5 12.809 5 15v1h11v-1c0-2.275-1.175-2.978-1.396-3.088l-.084-.042-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V7.631C13.412 6.156 12.232 5 10.725 5z"/><path fill="#FFC857" d="M14.156 12.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V7.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#79A548" d="M14.156 12.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H15c-.056-1.8-.844-2.194-.844-2.194z"/></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 opacity=".5"><path fill="#EFEFEF" d="M2 0v16h12V4l-4-4H2z"/><path fill="#FFF" d="M10 4V0l4 4h-4z" opacity=".65"/><path fill="#212121" d="M13 5v5L9 5h4z" opacity=".2"/><path fill="#999" d="M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z"/></g><g><path fill="#666" d="M10.725 5h-.45C8.818 5 7.588 6.205 7.588 7.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C6.135 12.059 5 12.809 5 15v1h11v-1c0-2.275-1.175-2.978-1.396-3.088l-.084-.042-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V7.631C13.412 6.156 12.232 5 10.725 5z"/><path fill="#FFC857" d="M14.156 12.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V7.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#79A548" d="M14.156 12.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H15c-.056-1.8-.844-2.194-.844-2.194z"/></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/apps.svg#apps-pagetree-page-frontend-user-hideinmenu" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page-frontend-user-hideinmenu" 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 opacity='.5'%3e%3cpath fill='%23EFEFEF' d='M2 0v16h12V4l-4-4H2z'/%3e%3cpath fill='%23FFF' d='M10 4V0l4 4h-4z' opacity='.65'/%3e%3cpath fill='%23212121' d='M13 5v5L9 5h4z' opacity='.2'/%3e%3cpath fill='%23999' d='M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23666' d='M10.725 5h-.45C8.818 5 7.588 6.205 7.588 7.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C6.135 12.059 5 12.809 5 15v1h11v-1c0-2.275-1.175-2.978-1.396-3.088l-.084-.042-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V7.631C13.412 6.156 12.232 5 10.725 5z'/%3e%3cpath fill='%23FFC857' d='M14.156 12.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V7.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3cpath fill='%2379A548' d='M14.156 12.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H15c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-apps-pagetree-page-frontend-user-hideinmenu;
}

Download

Download