In einer früheren Lektion
haben Sie gelernt, wie Sie Bilder in Ihre Webseite einbinden können.
Manchmal sind die Leute nicht wirklich sicher, wo sie
Bilder finden, oder sie sind selbst keine sehr guten Künstler.
Also heute möchte ich über die Verwendung von Font Awesome sprechen.
Font Awesome ist eine Sammlung von Symbolen, die Sie für
Ihre Seite verwenden können und sie sind so ziemlich weltweit erkennbar.
Hier bin ich auf der Font Awesome Seite.
Ich möchte Ihnen zeigen, wie man es benutzt.
Das erste, was ich tun werde, ist auf die Icons Auswahl gehen.
Wie Sie sehen können, gibt es Tausende von verschiedenen Symbolen,
aus denen Sie wählen können, um Ihre Seite zu dekorieren und es ist sehr einfach für Sie zu verwenden.
Der erste Schritt ist, dass Sie Ihre Webseite sagen müssen,
hey, ich möchte Font Awesome verwenden.
Im Abschnitt „Erste Schritte“ von Font Awesome geben sie Ihnen den Code.
Also lassen Sie mich Ihnen zeigen, wie es aussieht.
Hier bin ich mit einer einfachen Datei.
Das Einzige, was für Sie neu aussehen wird, ist, dass ich zwei einzigartige Ideen habe.
Die erste ist, dass ich einen Link im Kopfbereich meiner Seite habe.
Denken Sie daran, der Kopf ist, wo wir
all diese zusätzlichen Informationen, die nicht immer vom Benutzer gesehen werden,
und was ich hier getan habe, ist, dass ich mit dem Font Awesome CDN verbunden habe.
Es ist eine sehr einschüchternde Akronym, die nur Content Delivery Network bedeutet.
Sie machen im Grunde eine Vereinbarung, wo, hey,
ich werde Ihre Sachen verknüpfen und verwenden, aber ich werde
diesen speziellen Link verwenden, damit Sie wissen, wie viele Leute es benutzen.
Wenn wir in den Körperbereich reisen
, dann sehen Sie ein neues Tag,
das i-Tag, es steht für Symbol.
Erinnern Sie sich an das Bild-Tag?
Eines der Dinge, die Sie haben müssen, wenn Sie das Bild-Tag verwenden möchten, ist die Quelle,
welches Bild Sie verwenden möchten.
Mit Font Awesome müssen Sie ein Klassen-Tag einschließen,
und in diesem Klassen-Tag
werden Sie ihm sagen, welches Bild Sie verwenden möchten.
Also in diesem Fall
benutze ich den, der fa-wütend genannt wird.
Lassen Sie uns voran gehen und sehen, wie diese Seite aussieht.
Nun, wir landeten mit einer wütenden kleinen Person, die uns anstarrte.
Es ist wirklich unkompliziert.
Sie erhalten jedes Mal ein sehr kleines Symbol, wenn Sie dieses Tag einschließen.
Nun, ehrlich gesagt,
mein Bildschirm ist wirklich groß, also wenn Sie diesen Code ausführen würden,
wäre das Symbol wirklich klein.
Lassen Sie mich Ihnen also einige der Optionen zeigen, die Sie tun können, um die Größe Ihres Symbols anzupassen.
Also, was ich getan habe, ist, dass ich diese
Codezeile ein paar Mal kopiert habe, und in jedem
habe ich ein zusätzliches Attribut hinzugefügt, und das ist die Größe, die ich das Symbol haben möchte.
Also, genau hier, sagte ich, machen Sie das Symbol extra klein und dann habe ich mittel und groß.
Die 2x, 3x, 5x,
10x, etc, das macht es einfach jedes Mal viel größer.
Wenn ich nun die Seite noch einmal anschaue,
wird sie definitiv ein bisschen anders aussehen.
In der Tat ist es viel zu groß für den Bildschirm, also lassen
Sie mich es ein wenig kleiner machen, und da haben Sie es.
Wir haben die Icons in verschiedenen Größen.
Wütendes Gesicht ist eindeutig nicht das Einzige, das du tun kannst.
Einige der beliebtesten, die Sie vielleicht sehen, sind die Adresskarte.
Also werde ich es kopieren. Es beginnt immer als i-Tag mit der Klasse, gleich,
Sie müssen fas für Font Awesome haben,
und dann statt wütend,
lassen Sie uns voran und versuchen Sie eine Adresskarte.
Dieser wird Ihnen hoffentlich irgendwie vertraut aussehen.
Ich werde einen Zeilenumbruch einlegen, nur um die Dinge ein wenig zu vermischen.
Nun, wenn ich die Seite aktualisiere,
können Sie eine sehr vertraute kleine Adresskarte sehen.
Icons sind großartig, weil sie Ihrer Seite diese Art von
wirklich vertrauten Look geben, dass die Leute es denken, es sieht wirklich professionell aus.
Aber es gibt einige Nachteile bei der Verwendung von Symbolen, wenn Sie nicht vorsichtig sind.
Das Wichtigste ist, dass sie standardmäßig nicht unbedingt zugänglich sind.
Wenn Sie also ein Bildschirmlesegerät auf dieser Seite drehen würden,
würde es tatsächlich so erscheinen, als ob es überhaupt keinen Inhalt gibt.
Oder noch schlimmer, manchmal verwenden Menschen Symbole für Social-Media-Links.
Also lassen Sie mich Ihnen noch ein Beispiel zeigen, bevor wir mit Font Awesome fertig sind.
Also, was ich hier getan habe, ist, anstatt nur diese Symbole als Dekoration zu verwenden,
Ich habe sie tatsächlich in meine Website gesetzt,
so dass, wenn ich sagen wollte Link zu meinem Twitter-Account,
direkt hier unten, Ich würde das Twitter-Symbol.
Wenn ich eine Verbindung zu Pinterest herstellen möchte,
könnte ich dieses Pinterest-Symbol direkt dort verwenden,
und LinkedIn, und es sieht tatsächlich wirklich gut aus. Lassen Sie mich es Ihnen zeigen.
Los geht's, ich habe jede meiner Links.
Nur damit du es weißt, der Grund, warum diese Symbole blau sind
, ist, wieder, weil sie Links sind
, und auf jedem kann ich darauf klicken und es würde mich zu meinem Konto bringen.
Hier ist das Problem.
Es sieht gut aus, aber ich werde
eine schnelle Wave-Validator-Überprüfung ausführen, um zu sehen, ob mein Code semantisch korrekt ist.
Also werde ich zu meiner gehosteten Version gehen.
Ist er hier? Lass es mich finden.
Also verwende ich nicht den Code, den ich nur verwendet habe, weil
ich, um zu validieren, fortfahren und ihn auf den Server legen möchte.
Also werde ich nach oben gehen und ich werde auf mein Wave-Validierungs-Tool klicken,
und Welle wird durchgehen und mir drei Fehler geben.
Nicht nur drei Fehler,
sondern drei sehr wichtige Fehler,
und das ist einfach,
hey, du hast drei Links und sie haben eigentlich keinen Text.
Jemand, der ein Bildschirmlesegerät benutzt, hätte
keine Ahnung, wohin dieser Link gehen soll.
Es weiß nicht, dass dies Twitter oder Pinterest oder LinkedIn ist.
Aber ich habe eine wirklich einfache schnelle Lösung dafür.
Ich werde etwas, das ein Arienlabel genannt wird, entweder in
meinem Tag oder tatsächlich im Icon-Tag als auch verwenden.
Ich setze einfach Aria-Label gleich,
und in diesem Fall werde ich Twitter setzen.
Auf der nächsten kann ich Aria-Label gleich Pinterest hinzufügen, usw.
Durch das Hinzufügen dieser Arie-Etiketten,
Sie geben im Grunde Bildschirmleser die Möglichkeit,
jemandem zu sagen, wo dieser Link gehen wird, um ein Label zu lesen,
und das ist riesig in Bezug auf Zugänglichkeit.
Also ich hoffe, Sie haben Spaß mit Font Awesome.
Es gibt so viele verschiedene, die Sie wählen können,
aber wenn Sie gehen, um mit einigen dieser coolen Tricks zu spielen, stellen Sie
sicher, dass Sie machen sie zugänglich für so viele Menschen wie möglich.