Styleguide

Icons

In den Portalen werden keine kompletten Iconsets von FontAwesome oder den Bootstrap Glyphicons verwendet. Stattdessen wird ein eigener Icon Font verwendet, der Icons aus verschiedenen Icon Fonts zusammenstellt. Dies geschieht über eine Seite Fontello. Es werden keine Zugangsdaten benötigt. Zieht einfach die fontello-xxxxxx.zip aus dem Repository in das geöffnete Fontello Fenster. Werden neue Icons benötigt, sprecht euch bitte mit Christian ab, die wählen dann die entsprechenden Icons aus, die dann im CSS Projekt eingefügt werden. Danach muss die neue fontello-xxxxxx.zip im Repository gespeichert werden.

<div class="row">
    <div class="col-xs-1" ng-clipboard="dvm-icon-right-big">
        <div class="dvm-icon-right-big dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-fast-bw">
        <div class="dvm-icon-fast-bw dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-caret-down">
        <div class="dvm-icon-caret-down dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-caret-up">
        <div class="dvm-icon-caret-up dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-caret-left">
        <div class="dvm-icon-caret-left dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-caret-right">
        <div class="dvm-icon-caret-right dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-calendar">
        <div class="dvm-icon-calendar dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-chevron-down">
        <div class="dvm-icon-chevron-down dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-chevron-left">
        <div class="dvm-icon-chevron-left dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-chevron-right">
        <div class="dvm-icon-chevron-right dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-chevron-up">
        <div class="dvm-icon-chevron-up dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-comment">
        <div class="dvm-icon-comment dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-cancel">
        <div class="dvm-icon-cancel dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-cancel-circled">
        <div class="dvm-icon-cancel-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-user">
        <div class="dvm-icon-user dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-info-circled">
        <div class="dvm-icon-info-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-attach">
        <div class="dvm-icon-attach dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-eye">
        <div class="dvm-icon-eye dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-download">
        <div class="dvm-icon-download dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-pencil">
        <div class="dvm-icon-pencil dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-attention">
        <div class="dvm-icon-attention dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-fast-fw">
        <div class="dvm-icon-fast-fw dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-doc">
        <div class="dvm-icon-doc dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-phone">
        <div class="dvm-icon-phone dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-refresh">
        <div class="dvm-icon-refresh dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-pause">
        <div class="dvm-icon-pause dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-stop">
        <div class="dvm-icon-stop dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-play">
        <div class="dvm-icon-play dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-plus">
        <div class="dvm-icon-plus dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-minus">
        <div class="dvm-icon-minus dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-search">
        <div class="dvm-icon-search dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-trash-empty">
        <div class="dvm-icon-trash-empty dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-plus-circled">
        <div class="dvm-icon-plus-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-minus-circled">
        <div class="dvm-icon-minus-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-key">
        <div class="dvm-icon-key dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-ccw">
        <div class="dvm-icon-ccw dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-left-circled">
        <div class="dvm-icon-left-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-right-circled">
        <div class="dvm-icon-right-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-up-circled">
        <div class="dvm-icon-up-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-down-circled">
        <div class="dvm-icon-down-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-comment-empty">
        <div class="dvm-icon-comment-empty dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-download-cloud">
        <div class="dvm-icon-download-cloud dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-upload-cloud">
        <div class="dvm-icon-upload-cloud dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-doc-text">
        <div class="dvm-icon-doc-text dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-left">
        <div class="dvm-icon-angle-left dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-right">
        <div class="dvm-icon-angle-right dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-up">
        <div class="dvm-icon-angle-up dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-down">
        <div class="dvm-icon-angle-down dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-spinner">
        <div class="dvm-icon-spinner dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-circle">
        <div class="dvm-icon-circle dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-checkmark-circled">
        <div class="dvm-icon-checkmark-circled dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-checkmark-round">
        <div class="dvm-icon-checkmark-round dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-circled-left">
        <div class="dvm-icon-angle-circled-left dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-circled-right">
        <div class="dvm-icon-angle-circled-right dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-circled-up">
        <div class="dvm-icon-angle-circled-up dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-angle-circled-down">
        <div class="dvm-icon-angle-circled-down dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-ticket">
        <div class="dvm-icon-ticket dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-euro">
        <div class="dvm-icon-euro dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-thumbs-up-alt">
        <div class="dvm-icon-thumbs-up-alt dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-thumbs-down-alt">
        <div class="dvm-icon-thumbs-down-alt dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-file-pdf">
        <div class="dvm-icon-file-pdf dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-file-word">
        <div class="dvm-icon-file-word dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-file-excel">
        <div class="dvm-icon-file-excel dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-circle-notch">
        <div class="dvm-icon-circle-notch dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-paper-plane">
        <div class="dvm-icon-paper-plane dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-paper-plane-empty">
        <div class="dvm-icon-paper-plane-empty dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-paperclip">
        <div class="dvm-icon-paperclip dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-person">
        <div class="dvm-icon-person dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-hourglass-half">
        <div class="dvm-icon-hourglass-half dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-map-pin">
        <div class="dvm-icon-map-pin dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-commenting">
        <div class="dvm-icon-commenting dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-commenting-o">
        <div class="dvm-icon-commenting-o dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-log-out">
        <div class="dvm-icon-log-out dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-edit">
        <div class="dvm-icon-edit dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-android-add">
        <div class="dvm-icon-android-add dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-android-close">
        <div class="dvm-icon-android-close dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-android-cancel">
        <div class="dvm-icon-android-cancel dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-android-create">
        <div class="dvm-icon-android-create dvm-icon"></div>
    </div>
    <div class="col-xs-1" ng-clipboard="dvm-icon-ios-undo-outline">
        <div class="dvm-icon-ios-undo-outline dvm-icon"></div>
    </div>
</div>