Icon Font

Icon-Font

Die Nutzung von Icon-Fonts ist eine moderne Technik zur Einbindung von Symbolen auf einer Webseite. Gegenüber klassischen Image-Icons bieten sich viele Vorteile. Beispielsweise werden die Anfragen an den Webserver reduziert, da die gesamten Icons über eine Schriftart eingebunden werden.  Die Icons können über CSS-Eigenschaften wie Schriftgröße, Farbe, etc. formatiert werden. Mit der webGii-Icon Font können die in das CMS integrierten Icons beliebig genutzt werden.

  • arrow-right

    .icon-arrow-right:before {
        content: "\e92e"
    }

  • status-1

    .icon-status-1:before {
        content: "\e911";
        color:#009900
    }

  • status-0

    .icon-status-0:before {
        content: "\e910";
        color:#cc0000
    }

  • person

    .icon-person:before {
        content: "\e900"
    }

  • persons

    .icon-persons:before {
        content: "\e901"
    }

  • wallet

    .icon-wallet:before {
        content: "\e902"
    }

  • layout

    .icon-layout:before {
        content: "\e903"
    }

  • voucher

    .icon-voucher:before {
        content: "\e904"
    }

  • door

    .icon-door:before {
        content: "\e905"
    }

  • chair

    .icon-chair:before {
        content: "\e906"
    }

  • table

    .icon-table:before {
        content: "\e907"
    }

  • calculator

    .icon-calculator:before {
        content: "\e908"
    }

  • placeholder

    .icon-placeholder:before {
        content: "\e909"
    }

  • list

    .icon-list:before {
        content: "\e90a"
    }

  • load

    .icon-load:before {
        content: "\e90e"
    }

  • clock

    .icon-clock:before {
        content: "\e90f"
    }

  • inactive

    .icon-inactive:before {
        content: "\e910"
    }

  • active

    .icon-active:before {
        content: "\e911"
    }

  • percent

    .icon-percent:before {
        content: "\e912"
    }

  • deny

    .icon-deny:before {
        content: "\e913"
    }

  • question

    .icon-question:before {
        content: "\e914"
    }

  • coin

    .icon-coin:before {
        content: "\e915"
    }

  • power

    .icon-power:before {
        content: "\e916"
    }

  • logout

    .icon-logout:before {
        content: "\e917"
    }

  • login

    .icon-login:before {
        content: "\e918"
    }

  • flag

    .icon-flag:before {
        content: "\e919"
    }

  • cloud

    .icon-cloud:before {
        content: "\e91a"
    }

  • star

    .icon-star:before {
        content: "\e91b"
    }

  • error

    .icon-error:before {
        content: "\e91c"
    }

  • redo

    .icon-redo:before {
        content: "\e91d"
    }

  • undo

    .icon-undo:before {
        content: "\e91e"
    }

  • truck

    .icon-truck:before {
        content: "\e91f"
    }

  • car

    .icon-car:before {
        content: "\e920"
    }

  • trink

    .icon-trink:before {
        content: "\e922"
    }

  • trophy

    .icon-trophy:before {
        content: "\e923"
    }

  • statistics

    .icon-statistics:before {
        content: "\e924"
    }

  • lock

    .icon-lock:before {
        content: "\e925"
    }

  • key

    .icon-key:before {
        content: "\e926"
    }

  • minus

    .icon-minus:before {
        content: "\e927"
    }

  • plus

    .icon-plus:before {
        content: "\e928"
    }

  • search

    .icon-search:before {
        content: "\e929"
    }

  • database

    .icon-database:before {
        content: "\e92a"
    }

  • disk

    .icon-disk:before {
        content: "\e92b"
    }

  • cross

    .icon-cross:before {
        content: "\e92c"
    }

  • menu

    .icon-menu:before {
        content: "\e92d"
    }

  • arrow-down

    .icon-arrow-down:before {
        content: "\e92e"
    }

  • arrow-up

    .icon-arrow-up:before {
        content: "\e92f"
    }

  • arrow-left

    .icon-arrow-left:before {
        content: "\e930"
    }

  • arrow-right

    .icon-arrow-right:before {
        content: "\e931"
    }

  • wrench

    .icon-wrench:before {
        content: "\e932"
    }

  • gear

    .icon-gear:before {
        content: "\e933"
    }

  • package

    .icon-package:before {
        content: "\e934"
    }

  • download

    .icon-download:before {
        content: "\e935"
    }

  • upload

    .icon-upload:before {
        content: "\e936"
    }

  • print

    .icon-print:before {
        content: "\e937"
    }

  • picture

    .icon-picture:before {
        content: "\e938"
    }

  • cam

    .icon-cam:before {
        content: "\e939"
    }

  • music

    .icon-music:before {
        content: "\e93a"
    }

  • location

    .icon-location:before {
        content: "\e93b"
    }

  • calendar

    .icon-calendar:before {
        content: "\e93c"
    }

  • instagram

    .icon-instagram:before {
        content: "\e93d"
    }

  • facebook

    .icon-facebook:before {
        content: "\e941"
    }

  • googleplus

    .icon-googleplus:before {
        content: "\e940"
    }

  • twitter

    .icon-twitter:before {
        content: "\e921"
    }

  • euro

    .icon-euro:before {
        content: "\e942"
    }

  • pinterest

    .icon-pinterest:before {
        content: "\e93f"
    }

  • xing

    .icon-xing:before {
        content: "\e93e"
    }

  • mail

    .icon-mail:before {
        content: "\e943"
    }

  • phone

    .icon-phone:before {
        content: "\e944"
    }

  • ccard

    .icon-ccard:before {
        content: "\e945"
    }

  • cart

    .icon-cart:before {
        content: "\e946"
    }

  • path

    .icon-path:before {
        content: "\e947"
    }

  • like

    .icon-like:before {
        content: "\e948"
    }

  • message

    .icon-message:before {
        content: "\e949"
    }

  • temp

    .icon-temp:before {
        content: "\e94a"
    }

  • eat

    .icon-eat:before {
        content: "\e94b"
    }

  • heart

    .icon-heart:before {
        content: "\e94c"
    }

  • folder

    .icon-folder:before {
        content: "\e94d"
    }

  • stack

    .icon-stack:before {
        content: "\e94e"
    }

  • docs

    .icon-docs:before {
        content: "\e94f"
    }

  • doc

    .icon-doc:before {
        content: "\e951"
    }

  • sheet

    .icon-sheet:before {
        content: "\e952"
    }

  • page

    .icon-page:before {
        content: "\e950"
    }

  • excel

    .icon-excel:before {
        content: "\e90b"
    }

  • word

    .icon-word:before {
        content: "\e90c"
    }

  • pdf

    .icon-pdf:before {
        content: "\e95c"
    }

  • invoice

    .icon-invoice:before {
        content: "\e90d"
    }

  • contacts

    .icon-contacts:before {
        content: "\e95d"
    }

  • book

    .icon-book:before {
        content: "\e953"
    }

  • signal

    .icon-signal:before {
        content: "\e954"
    }

  • video

    .icon-video:before {
        content: "\e955"
    }

  • images

    .icon-images:before {
        content: "\e956"
    }

  • image

    .icon-image:before {
        content: "\e957"
    }

  • company

    .icon-company:before {
        content: "\e959"
    }

  • style

    .icon-style:before {
        content: "\e958"
    }

  • pencil

    .icon-pencil:before {
        content: "\e95a"
    }

  • trash

    .icon-trash:before {
        content: "\e95e"
    }

  • home

    .icon-home:before {
        content: "\e95b"
    }

  • eye

    .icon-eye:before {
        content: "\e95f"
    }

  • eye-close

    .icon-eye-close:before {
        content: "\e960"
    }

  • linkedin

    .icon-linkedin:before {
        content: "\e961"
    }

  • web

    .icon-web:before {
        content: "\e962"
    }

  • link

    .icon-link:before {
        content: "\e963"
    }

  • info

    .icon-info:before {
        content: "\e964"
    }

  • weed

    .icon-weed:before {
        content: "\e965"
    }

  • categories

    .icon-categories:before {
        content: "\e966"
    }

  • crosshair

    .icon-crosshair:before {
        content: "\e967"
    }

  • move

    .icon-move:before {
        content: "\e968"
    }

  • resize-1

    .icon-resize-1:before {
        content: "\e969"
    }

  • resize-2

    .icon-resize-2:before {
        content: "\e96a"
    }

  • rotate

    .icon-rotate:before {
        content: "\e96b"
    }

  • tickets

    .icon-tickets:before {
        content: "\e96c"
    }

  • texteditor

    .icon-texteditor:before {
        content: "\e96d"
    }

  • bed

    .icon-bed:before {
        content: "\e96e"
    }

  • palm

    .icon-palm:before {
        content: "\e96f"
    }

  • flower

    .icon-flower:before {
        content: "\e970"
    }

  • plane

    .icon-plane:before {
        content: "\e971"
    }

  • youtube

    .icon-youtube:before {
        content: "\e972"
    }

  • bell

    .icon-bell:before {
        content: "\e973"
    }

  • checked

    .icon-checked:before {
        content: "\e974"
    }