Linkpfeile ohne Grafikdateien

Immer noch kommt es vor, dass Designer Pfeilchen vor oder nach den Links sehen möchten. Natürlich wollen wir heutzutage keine Grafikdateien dafür verwenden, sondern möglichst eine Lösung präsentieren, die per CSS umsetzbar und für jede Schriftgröße skalierbar ist.

Es gibt die Möglichkeit Webfonts einzusetzen, die man sich z.B. hier http://fortawesome.github.io/Font-Awesome/ oder hier http://www.fontello.com/ generieren kann. Handelt es aber tatsächlich nur um Pfeilchen, so geht das auch mit reinem CSS.

Erste Möglichkeit:
Man fügt per CSS ein leeres Zeichen vor (oder nach) dem Link ein und stylt dieses mit CSS.

p a {
  position:relative;
  padding-left:15px;
}
p a:before {
  content:'';
  position:absolute;
  top:3px;
  left:0;
  height:1px;
  width:1px;
  border:6px solid transparent;
  border-left-color:red;
}

Beispiel 1

Zweite Möglichkeit (noch einfacher):
Man verwendet die HTML Sonderzeichen (Character Entities) und zwar den „CSS(ISO)“ Wert, wie man ihn in dieser Tabelle auslesen kann: http://brajeshwar.github.io/entities/
Im CSS sieht das dann z.B. so aus:

p a { 
  text-decoration:none;
}
p a:before {
  content:"\25b6 \00a0"; 
}

\25b6 ist der Wert des Pfeilchens, \00a0 der des Leerzeichens.

Beispiel 2

Font Awesome Grafiken als Submitbutton

Was Font Awesome angeht, so will ich nur eine Sache erwähnen: benötigt man die berühmte Lupe als Submitbutton in einem Suchformular, so geht das mit Font Awesome folgendermaßen:

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
input.searchsubmit {
    font: normal normal normal 14px/1.5 FontAwesome;
}

Das HTML sieht dann folgendermaßen aus:

<input class="searchsubmit" type="submit" value="&#xf002;" name="tx_indexedsearch[submit_button]">

Um den richtigen Wert für den value zu ermitteln, sehe man in dieser Tabelle nach: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Link:
http://stackoverflow.com/questions/11686007/font-awesome-input-type-submit