Das Ergebnis ist einfach geschrieben, reicht mir vollkommen aus und bietet mir jetzt die Möglichkeit die Elemente mit Rahmen zu versehen wie im Screenshot zu sehen:

Das Plugin benötigt jQuery und kann schnell in den TinyMce integriert werden:

1. Schritt: Plugin hier runter laden und in den tiny_mce/plugins Ordner entpacken.

2. Schritt: TinyMce Config mit dem Parameter showblocks erweitern.

TinyMce Config:

plugins : "pluginA,pluginB,PluginC,...,showblocks",
theme_advanced_buttons1 : "showblocks,|,bold,italic,underline,strikethrough,..."

3. Schritt: Jetzt kann man den Plugin etwas steuern, in dem man im sagen kann ob er schon sofort die Elemente umrahmen soll oder man kann die Hover Funktion abschalten.

show_blocks: 1, // (optional) show blocks by open the editor
show_blocks_hover: 0 // (optional) hover Tag name 1 or show it permanent 0

Viel Spaß.

Man lädt die Font auf der Web Symbols Seite runter und bindet sie im Style ein.

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('/fonts/websymbols-regular-webfont.eot');
	src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}
 
.symbol { font-family: 'WebSymbolsRegular'; font-size:16px; }

Und im Html kann man jetzt ganz einfach die Icons mit Buchstaben nachbilden:

<div><span class="symbol">I</span>Bild</div>
<div><span class="symbol">S</span>Zahnrad</div>
<div><span class="symbol">C</span>Wolke</div>

Die Web Symbols Font wird immer weiter Entwickelt und bekommt bald neue Icons wie Telefon und E-Mail. Die Benutzung ist frei und unterliegt der OFL Lizenz. Somit hat man eine simple Möglichkeit mit wenigem Einsatz Standard Icons in die Seite zu integrieren.

Und ich möchte noch auf ein Projekt hinweisen wenn es um Öffentliche Icons/ Symbole geht. Das The Noun Project beinhaltet eine Große Sammlung an Vector Grafiken die alltägliche Sachen symbolisieren. Man kann die Icons frei nutzen und man finden eigentlich zu jedem Thema passendes Symbol.

Um das zu erleichtern, haben die Jungs aus 37signals.com einen simplen und Genialen CSS Helper geschrieben:

img:not([width]):not([height]) {
  border: 2px solid red !important;
}

Nach dem Einbau in die Seite, kann man im Developer Modus die Bilder mit einem Roten Rahmen einfacher im Layout finden.

<VirtualHost 127.0.0.1:80>

ServerName domain.tld

<Directory “/var/www/domain/”>
AllowOverride All
Order allow,deny
Allow from all
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</Directory>
</VirtualHost>

1. In der Adressleiste about:config eingeben und aufrufen.
2. Natürlich wird man Vorsichtig sein und es dem Firefox versprechen.
3. Nach errorconsole filtern.
4. Mit einem Doppelklick auf den Registry Wert devtools.errorconsole.enabled, kann man ihn auf true setzen.
5. Alle Firefox Fenster schließen und neu starten.

Jetzt bekommt man wie gewohnt alle JavaScript Fehlermeldungen zu sehen.