Gehen wir nun zu unserer nächsten Übung über,
in der wir mehr über Icon-Schriftarten erfahren werden.
Wir werden Font Awesome herunterladen
und dann in unser Website-Design aufnehmen.
Und auch werden wir Bootstrap Social herunterladen und
einige soziale Patente entwerfen, die in den Pitch aufgenommen werden.
Um zu beginnen, gehen Sie in den Verwirrungsordner in Ihrem Terminal-Fenster,
und wir werden npm verwenden, um zu gehen und holen Font Awesome für uns. Geben Sie
also an der Eingabeaufforderung npm install font-awesome minus save ein.
Das wird also Font Awesome in unseren Niemand-Ordner holen.
Und zur gleichen Zeit wird es Font Awesome zu unserer package.json-Datei als Abhängigkeit hinzufügen.
Sobald Font Awesome geholt wird,
dann können wir voran gehen, um es in unserer Website zu nutzen.
Der nächste Schritt besteht darin, den Bootstrap Social zu holen und ihn in unser Projekt zu installieren.
Um dies zu tun, geben Sie an der Eingabeaufforderung npm
install bootstrap-social @5 .1.1
minus save ein.
Und das wird Bootstrap Social holen und es in unser Projekt installieren.
Jetzt müssen wir diese Schrift fünf verwenden,
es ist die Font Awesome, und der Bootstrap Social auf unserer Website.
Also gehe ich zu index.html direkt an der Spitze,
kurz vor der style.css Datei,
werde ich sowohl Font Awesome als auch Bootstrap Social importieren.
Also genau dort, lassen Sie uns in Link
rel Stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Also lassen Sie uns
das in unsere index.html Datei importieren ähnlich,
gegeben Import der Bootstrap social.
So node_modules/bootstrap-social/bootsrap-social.css.
Also diese beiden werden wir in unsere index.html aufnehmen.
In ähnlicher Weise muss ich diese beiden in meine aboutus.html aufnehmen. Lassen Sie mich das kopieren und
zu aboutus.html wechseln und dann auch in die aboutus.html einfügen.
Zurück zu index.html werden wir nicht die Font Awesome Symbole
und auch die Bootstrap Social Icons in unserer index.html Seite verwenden.
Gehe zu dieser Navigationsleiste in der index.html Seite,
direkt in diesem Link für ihre Homepage,
gehe ich hinein und füge diesen Font Awesome Code hinzu.
Also werde ich sagen span Klasse fa fa-home.
So sagt die fa, dass ich die Font Awesome Klasse anwenden,
fa nach Hause ist das spezifische Symbol für das Home-Symbol.
So wollte ich das auch auf meiner Homepage nutzen.
Und dann schließen Sie die Span-Tag- und dann nach dem Leerzeichen, die Home-Taste.
Das wird also das Home-Icon darin enthalten.
Ich werde das kopieren und dann für die über,
ich werde das gleiche verwenden, aber anstelle von fa-home,
also beachten Sie, geben Sie ein Leerzeichen zwischen dem schließenden Span-Tag und
über und anstelle von fa-home würde ich fa-info sagen.
Nun, diese, Ich habe herausgefunden, dass dies die Symbole sind, die ich verwenden möchte.
Sie können sich die Font Awesome Dokumentation ansehen, um
herauszufinden, welche Symbole und wie Sie sie einbeziehen.
Für das Menü werde ich dort ein Listensymbol verwenden.
Ich nenne das Symbol als Fa-Liste.
Jetzt werde ich auch größere Symbole verwenden.
Also werde ich auch fa-lg
in die Icon-Klassen fa-lg einbinden.
Jetzt für den Kontakt werde ich fa-home verwenden,
und dann, wenn dies fa-address-card fa-lg und speichern Sie die Änderungen.
Sie sollten das gleiche wiederholen,
Hinzufügen der gleichen Symbole auch in aboutus.html Seite,
und dann werden wir einen Blick auf unsere Webseite nehmen, nachdem wir die Änderungen abgeschlossen haben.
Nachdem ich auch aboutus.html und index.html einschließlich der Symbole geändert
habe, habe ich die Änderungen gespeichert und dann bin ich hier auf meiner Webseite und notiere,
wie diese Symbole in meine Navigationsleiste aufgenommen wurden.
So können Sie sehen, dass es ein Home-Icon vor zu Hause
gibt, gibt es ein Info-Symbol vor über,
ein Listen-Symbol vor dem Menü und ein Adresskarten-Symbol vor dem Kontakt.
Dies ist also eine nette Möglichkeit, einige visuelle Elemente in Ihre Webseite hinzuzufügen.
Nun, das ist wundervoll.
Nun möchte ich jetzt an der Aktualisierung des Filmmaterials arbeiten.
Jetzt möchte ich das Telefon-Fax und E-Mail durch Symbole ersetzen und
auch all diese in Social-Media-Buttons verwandeln.
Um das zu tun, werden wir Font Awesome dafür nutzen,
und dann werden wir Bootstrap Social dafür nutzen.
Wenn ich in die Fußzeile der Seite index.html gehe,
werde ich das Telefon mit Font Awesome Symbol ersetzen.
Also würde ich sagen, „i“, wie ich bereits erwähnt habe,
können Sie entweder span oder ich verwenden, um die Font Awesome Symbole anzugeben.
Font Awesome Website verwendet ich, aber ich zeige Ihnen zwei mögliche Möglichkeiten, diese Dinge zu tun.
Also sage ich fa fa-tel,
Es tut mir leid fa-phone und schließen Sie den Tag hier.
Und für Fax, ich werde einfach kopieren,
und dann für Fax, wenn es Fa-Fax ist,
und für E-Mail ist es Fa-Umschlag und speichern Änderungen.
Wenden Sie nun dasselbe auf die Seite aboutus.html an. Wenn Sie
auf meine Webseite gehen,
bemerken Sie sofort, dass das Telefon, Fax
und E-Mail, jetzt durch die entsprechenden Symbole ersetzt werden.
Jetzt ist der letzte Schritt, Bootstrap Social zu verwenden, um
alle diese Links durch die Social-Media-Buttons zu ersetzen.
Um dies zu erledigen,
gehen wir in die Fußzeile und ersetzen dann jedes von
ihnen durch ihre entsprechenden Symbole dort.
Also würde ich sagen, ich Klasse
Font Awesome fa-google-plus und
schließe das Tag dort.
Und dann werde ich das einfach kopieren und dann dasselbe auf die restlichen anwenden.
Also werde ich sagen, Facebook,
LinkedIn, Twitter
, YouTube, und schließlich für Mail werde ich
dort ein Umschlagsymbol verwenden.
Darüber hinaus, um dies in Bootstrap-soziale Patente für die A-Tags zu verwandeln,
sollten wir die Klassen als Schaltflächen-Sozial-Symbol anwenden
und dann button-google dasselbe auf die restlichen tun.
Für die zweite wäre es Facebook,
dann LinkedIn,
Twitter, Google und dann für die letzte,
da wir keinen entsprechenden Bootstrap Social Icon Button für die Mail haben,
werden wir nichts außer Button Social Icons haben.
Lassen Sie uns jetzt gehen und einen kurzen Blick auf unsere Fußzeile werfen. Wenn
Sie in Ihre Fußzeile gehen, können Sie jetzt sehen, dass alle Schaltflächen
in ihre entsprechenden sozialen Schaltflächen verwandelt wurden.
Lassen Sie uns die gleiche Änderung an der Fußzeile in aboutus.html vornehmen.
Also kopiere ich diesen Code einfach dort und gehe dann zu aboutus.html
und ersetze ihn dann einfach in der Fußzeile von aboutus.html.
Lassen Sie uns damit einen letzten Blick auf unsere Webseite werfen. Wenn Sie
auf unsere Webseite gehen,
können Sie sehen, dass jetzt
alle Social-Media-Links dort in Social-Media-Schaltflächen umgewandelt wurden. Wenn Sie
auf die Übersichtsseite gehen,
sehen Sie das Gleiche auch auf der Übersichtsseite.
Nachdem Sie diese Übung abgeschlossen haben,
ist dies möglicherweise ein guter Zeitpunkt, um ein gutes Commit mit der Nachricht, Symbolschriftarten, durchzuführen.