Seit neuestem wird es immer beliebter, statt Sprites Iconfonts zu verwenden. Die Vorteile liegen auf der Hand: Die Bilder sind Vektoren die beliebig skaliert oder eingefärbt werden können. Ein Nachteil ist natürlich, das mehrfarbige Icons nicht möglich sind.
Bis vor kurzem habe ich zur Erstellung IcoMoon ( https://icomoon.io/ ) verwendet, das einfach zu bedienen ist und neben diverser Cross-Browser Fixes auch eine große Menge von Gratis Icons zur Verfügung stellt.
Vor kurzem habe ich allerdings auf Fontcustom ( https://github.com/FontCustom/fontcustom/ ) umgestellt. Die Bedienung ist einfach per Command Line und es lässt sich einfach in Grunt Abläufe sowie in Compass ( http://compass-style.org/ ) integrieren.
Wie auf der Webseite beschrieben ist eine Installation auf Mac OS X mit Brew ( http://brew.sh/ ) ganz einfach:
brew install fontforge --with-python brew install eot-utils sudo gem install fontcustom
Danach kann man sich in seinem Projekt eine Config Datei mit „fontcustom config“ erstellen lassen. Um Fontcustom in mein Compass Projekt integrieren, musste ich zwei Einstellungen vornehmen. Einerseits in meiner config.rb folgende Zeile hinzufügen:
fonts_dir = "view/fonts"
damit Compass weiß wo sich die Fontfiles befinden(Der Pfad ist natürlich willkürlich).
In meiner fontcustom.yml habe ich dann folgende Einstellungen vorgenommen:
input: vectors: view/img/icons output: fonts: view/fonts css: view/sass templates: - scss-rails preprocessor_path: ''
Der Vollständigkeit halber (und damit man sich meine Ordnerstruktur vorstellen kann) hier mein komplettes config.rb
http_path = "/" css_dir = "view/css" sass_dir = "view/sass" images_dir = "view/img" javascripts_dir = "view/js" fonts_dir = "view/fonts" # You can select your preferred output style here (can be overridden via the command line): output_style = :compact #:expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: relative_assets = true
In meiner screen.scss befindet sich dann noch eine Zeile mit @include „_fontcustom-rails.scss“ um die Font Definitionen auch in meine CSS File zu inkludieren.