Wie kombinieren Sie font-fantastische und CSS-Dreiecke?

Question

Ich versuche, eine generische Lösung zum Hinzufügen von Dreiecke zu font-fantastischen Icons zu erstellen.Ich habe hier eine arbeitet-Demo meines Codes: http://jsfiddle.net/remisture/2gg6d/5/

Dies ist jedoch nicht sehr elegant und flexibel, da der Code sowohl Schriftgrößen als auch Margen in Pixelwerten enthält.Es wäre perfekt, wenn die Größe und die Platzierung des Dreiecks auf der Grundlage der Schriftgröße der Eltern erzeugt werden, und unterstützt natürlich auch die "FA-2X" - "FA-5X" -Kläste: http://fontawesome.io/examples/

Jede Hilfe würde sehr geschätzt werden.

html

generasacodicetagpre.

css

generasacodicetagpre.

Answer 1

Ich habe einige Änderungen an Ihrem css gemacht, um auf das gewünschte Verhalten zu gelangen.Die Dreiecke sind so groß und positioniert nach der Schriftgröße der Eltern.Dies ist kein Pixel perfekt, aber Sie sollten die Idee bekommen und es tanken können.

Der Punkt ist, nur EM- oder Prozentwerte zu verwenden, um die Dreiecke zu positionieren und die Grenzbreite einzustellen.

Demo (Ich habe auch das Stylesheet vereinfacht, so dass es so isteinfacher zu tweak)

Danach können Sie neue Klassen mit anderen Werten der Grenzbreite und Positionierung für die anderen Klassen hinzufügen, die Sie unterstützen möchten (fa-2x-fa-5x).

Relevante CSS:

generasacodicetagpre.