1 00:00:02,790 --> 00:00:06,440 Gehen wir nun zu unserer nächsten Übung über, 2 00:00:06,440 --> 00:00:09,225 in der wir mehr über Icon-Schriftarten erfahren werden. 3 00:00:09,225 --> 00:00:11,435 Wir werden Font Awesome herunterladen 4 00:00:11,435 --> 00:00:16,195 und dann in unser Website-Design aufnehmen. 5 00:00:16,195 --> 00:00:20,800 Und auch werden wir Bootstrap Social herunterladen und 6 00:00:20,800 --> 00:00:27,360 einige soziale Patente entwerfen, die in den Pitch aufgenommen werden. 7 00:00:27,360 --> 00:00:35,450 Um zu beginnen, gehen Sie in den Verwirrungsordner in Ihrem Terminal-Fenster, 8 00:00:35,450 --> 00:00:40,310 und wir werden npm verwenden, um zu gehen und holen Font Awesome für uns. Geben Sie 9 00:00:40,310 --> 00:00:49,475 also an der Eingabeaufforderung npm install font-awesome minus save ein. 10 00:00:49,475 --> 00:00:53,930 Das wird also Font Awesome in unseren Niemand-Ordner holen. 11 00:00:53,930 --> 00:01:00,825 Und zur gleichen Zeit wird es Font Awesome zu unserer package.json-Datei als Abhängigkeit hinzufügen. 12 00:01:00,825 --> 00:01:02,910 Sobald Font Awesome geholt wird, 13 00:01:02,910 --> 00:01:08,215 dann können wir voran gehen, um es in unserer Website zu nutzen. 14 00:01:08,215 --> 00:01:16,100 Der nächste Schritt besteht darin, den Bootstrap Social zu holen und ihn in unser Projekt zu installieren. 15 00:01:16,100 --> 00:01:18,980 Um dies zu tun, geben Sie an der Eingabeaufforderung npm 16 00:01:18,980 --> 00:01:27,090 install bootstrap-social @5 .1.1 17 00:01:29,130 --> 00:01:31,645 minus save ein. 18 00:01:31,645 --> 00:01:37,630 Und das wird Bootstrap Social holen und es in unser Projekt installieren. 19 00:01:37,630 --> 00:01:41,460 Jetzt müssen wir diese Schrift fünf verwenden, 20 00:01:41,460 --> 00:01:45,760 es ist die Font Awesome, und der Bootstrap Social auf unserer Website. 21 00:01:45,760 --> 00:01:51,485 Also gehe ich zu index.html direkt an der Spitze, 22 00:01:51,485 --> 00:01:54,605 kurz vor der style.css Datei, 23 00:01:54,605 --> 00:02:00,125 werde ich sowohl Font Awesome als auch Bootstrap Social importieren. 24 00:02:00,125 --> 00:02:04,325 Also genau dort, lassen Sie uns in Link 25 00:02:04,325 --> 00:02:12,440 rel Stylesheet href 26 00:02:12,900 --> 00:02:22,830 node_modules/font-awesome/css/font-awesome.main.css Also lassen Sie uns 27 00:02:35,820 --> 00:02:45,080 das in unsere index.html Datei importieren ähnlich, 28 00:02:46,050 --> 00:02:57,380 gegeben Import der Bootstrap social. 29 00:03:00,460 --> 00:03:07,760 So node_modules/bootstrap-social/bootsrap-social.css. 30 00:03:07,760 --> 00:03:13,995 Also diese beiden werden wir in unsere index.html aufnehmen. 31 00:03:13,995 --> 00:03:21,960 In ähnlicher Weise muss ich diese beiden in meine aboutus.html aufnehmen. Lassen Sie mich das kopieren und 32 00:03:21,960 --> 00:03:29,995 zu aboutus.html wechseln und dann auch in die aboutus.html einfügen. 33 00:03:29,995 --> 00:03:37,180 Zurück zu index.html werden wir nicht die Font Awesome Symbole 34 00:03:37,180 --> 00:03:43,060 und auch die Bootstrap Social Icons in unserer index.html Seite verwenden. 35 00:03:43,060 --> 00:03:48,485 Gehe zu dieser Navigationsleiste in der index.html Seite, 36 00:03:48,485 --> 00:03:53,770 direkt in diesem Link für ihre Homepage, 37 00:03:53,770 --> 00:03:59,840 gehe ich hinein und füge diesen Font Awesome Code hinzu. 38 00:03:59,840 --> 00:04:06,430 Also werde ich sagen span Klasse fa fa-home. 39 00:04:06,430 --> 00:04:10,615 So sagt die fa, dass ich die Font Awesome Klasse anwenden, 40 00:04:10,615 --> 00:04:14,550 fa nach Hause ist das spezifische Symbol für das Home-Symbol. 41 00:04:14,550 --> 00:04:18,215 So wollte ich das auch auf meiner Homepage nutzen. 42 00:04:18,215 --> 00:04:26,190 Und dann schließen Sie die Span-Tag- und dann nach dem Leerzeichen, die Home-Taste. 43 00:04:26,190 --> 00:04:30,265 Das wird also das Home-Icon darin enthalten. 44 00:04:30,265 --> 00:04:36,945 Ich werde das kopieren und dann für die über, 45 00:04:36,945 --> 00:04:42,895 ich werde das gleiche verwenden, aber anstelle von fa-home, 46 00:04:42,895 --> 00:04:46,610 also beachten Sie, geben Sie ein Leerzeichen zwischen dem schließenden Span-Tag und 47 00:04:46,610 --> 00:04:51,100 über und anstelle von fa-home würde ich fa-info sagen. 48 00:04:51,100 --> 00:04:55,280 Nun, diese, Ich habe herausgefunden, dass dies die Symbole sind, die ich verwenden möchte. 49 00:04:55,280 --> 00:05:00,110 Sie können sich die Font Awesome Dokumentation ansehen, um 50 00:05:00,110 --> 00:05:04,820 herauszufinden, welche Symbole und wie Sie sie einbeziehen. 51 00:05:04,820 --> 00:05:09,610 Für das Menü werde ich dort ein Listensymbol verwenden. 52 00:05:09,610 --> 00:05:15,840 Ich nenne das Symbol als Fa-Liste. 53 00:05:15,840 --> 00:05:20,400 Jetzt werde ich auch größere Symbole verwenden. 54 00:05:20,400 --> 00:05:23,160 Also werde ich auch fa-lg 55 00:05:23,160 --> 00:05:32,890 in die Icon-Klassen fa-lg einbinden. 56 00:05:32,890 --> 00:05:39,345 Jetzt für den Kontakt werde ich fa-home verwenden, 57 00:05:39,345 --> 00:05:49,095 und dann, wenn dies fa-address-card fa-lg und speichern Sie die Änderungen. 58 00:05:49,095 --> 00:05:51,465 Sie sollten das gleiche wiederholen, 59 00:05:51,465 --> 00:05:56,220 Hinzufügen der gleichen Symbole auch in aboutus.html Seite, 60 00:05:56,220 --> 00:06:01,880 und dann werden wir einen Blick auf unsere Webseite nehmen, nachdem wir die Änderungen abgeschlossen haben. 61 00:06:01,880 --> 00:06:09,350 Nachdem ich auch aboutus.html und index.html einschließlich der Symbole geändert 62 00:06:09,350 --> 00:06:14,675 habe, habe ich die Änderungen gespeichert und dann bin ich hier auf meiner Webseite und notiere, 63 00:06:14,675 --> 00:06:21,150 wie diese Symbole in meine Navigationsleiste aufgenommen wurden. 64 00:06:21,150 --> 00:06:24,890 So können Sie sehen, dass es ein Home-Icon vor zu Hause 65 00:06:24,890 --> 00:06:27,885 gibt, gibt es ein Info-Symbol vor über, 66 00:06:27,885 --> 00:06:32,525 ein Listen-Symbol vor dem Menü und ein Adresskarten-Symbol vor dem Kontakt. 67 00:06:32,525 --> 00:06:39,195 Dies ist also eine nette Möglichkeit, einige visuelle Elemente in Ihre Webseite hinzuzufügen. 68 00:06:39,195 --> 00:06:40,800 Nun, das ist wundervoll. 69 00:06:40,800 --> 00:06:47,590 Nun möchte ich jetzt an der Aktualisierung des Filmmaterials arbeiten. 70 00:06:47,590 --> 00:06:53,250 Jetzt möchte ich das Telefon-Fax und E-Mail durch Symbole ersetzen und 71 00:06:53,250 --> 00:06:59,370 auch all diese in Social-Media-Buttons verwandeln. 72 00:06:59,370 --> 00:07:03,810 Um das zu tun, werden wir Font Awesome dafür nutzen, 73 00:07:03,810 --> 00:07:08,440 und dann werden wir Bootstrap Social dafür nutzen. 74 00:07:08,440 --> 00:07:11,720 Wenn ich in die Fußzeile der Seite index.html gehe, 75 00:07:11,720 --> 00:07:19,610 werde ich das Telefon mit Font Awesome Symbol ersetzen. 76 00:07:19,610 --> 00:07:22,930 Also würde ich sagen, „i“, wie ich bereits erwähnt habe, 77 00:07:22,930 --> 00:07:29,130 können Sie entweder span oder ich verwenden, um die Font Awesome Symbole anzugeben. 78 00:07:29,130 --> 00:07:34,820 Font Awesome Website verwendet ich, aber ich zeige Ihnen zwei mögliche Möglichkeiten, diese Dinge zu tun. 79 00:07:34,820 --> 00:07:41,230 Also sage ich fa fa-tel, 80 00:07:41,230 --> 00:07:52,260 Es tut mir leid fa-phone und schließen Sie den Tag hier. 81 00:07:53,270 --> 00:07:58,985 Und für Fax, ich werde einfach kopieren, 82 00:07:58,985 --> 00:08:07,550 und dann für Fax, wenn es Fa-Fax ist, 83 00:08:07,550 --> 00:08:17,705 und für E-Mail ist es Fa-Umschlag und speichern Änderungen. 84 00:08:17,705 --> 00:08:24,485 Wenden Sie nun dasselbe auf die Seite aboutus.html an. Wenn Sie 85 00:08:24,485 --> 00:08:26,210 auf meine Webseite gehen, 86 00:08:26,210 --> 00:08:29,765 bemerken Sie sofort, dass das Telefon, Fax 87 00:08:29,765 --> 00:08:34,420 und E-Mail, jetzt durch die entsprechenden Symbole ersetzt werden. 88 00:08:34,420 --> 00:08:37,735 Jetzt ist der letzte Schritt, Bootstrap Social zu verwenden, um 89 00:08:37,735 --> 00:08:41,550 alle diese Links durch die Social-Media-Buttons zu ersetzen. 90 00:08:41,550 --> 00:08:43,350 Um dies zu erledigen, 91 00:08:43,350 --> 00:08:47,835 gehen wir in die Fußzeile und ersetzen dann jedes von 92 00:08:47,835 --> 00:08:53,400 ihnen durch ihre entsprechenden Symbole dort. 93 00:08:53,400 --> 00:08:57,345 Also würde ich sagen, ich Klasse 94 00:08:57,345 --> 00:09:06,545 Font Awesome fa-google-plus und 95 00:09:06,545 --> 00:09:09,255 schließe das Tag dort. 96 00:09:09,255 --> 00:09:16,170 Und dann werde ich das einfach kopieren und dann dasselbe auf die restlichen anwenden. 97 00:09:16,170 --> 00:09:21,660 Also werde ich sagen, Facebook, 98 00:09:28,330 --> 00:09:38,400 LinkedIn, Twitter 99 00:09:44,910 --> 00:09:51,860 , YouTube, und schließlich für Mail werde ich 100 00:09:51,860 --> 00:09:59,865 dort ein Umschlagsymbol verwenden. 101 00:09:59,865 --> 00:10:07,250 Darüber hinaus, um dies in Bootstrap-soziale Patente für die A-Tags zu verwandeln, 102 00:10:07,250 --> 00:10:16,150 sollten wir die Klassen als Schaltflächen-Sozial-Symbol anwenden 103 00:10:16,150 --> 00:10:24,870 und dann button-google dasselbe auf die restlichen tun. 104 00:10:24,870 --> 00:10:30,255 Für die zweite wäre es Facebook, 105 00:10:30,255 --> 00:10:38,690 dann LinkedIn, 106 00:10:44,970 --> 00:10:52,370 Twitter, Google und dann für die letzte, 107 00:10:52,370 --> 00:11:02,985 da wir keinen entsprechenden Bootstrap Social Icon Button für die Mail haben, 108 00:11:02,985 --> 00:11:08,130 werden wir nichts außer Button Social Icons haben. 109 00:11:08,130 --> 00:11:13,170 Lassen Sie uns jetzt gehen und einen kurzen Blick auf unsere Fußzeile werfen. Wenn 110 00:11:13,170 --> 00:11:16,720 Sie in Ihre Fußzeile gehen, können Sie jetzt sehen, dass alle Schaltflächen 111 00:11:16,720 --> 00:11:20,505 in ihre entsprechenden sozialen Schaltflächen verwandelt wurden. 112 00:11:20,505 --> 00:11:25,720 Lassen Sie uns die gleiche Änderung an der Fußzeile in aboutus.html vornehmen. 113 00:11:25,720 --> 00:11:33,125 Also kopiere ich diesen Code einfach dort und gehe dann zu aboutus.html 114 00:11:33,125 --> 00:11:41,675 und ersetze ihn dann einfach in der Fußzeile von aboutus.html. 115 00:11:41,675 --> 00:11:46,415 Lassen Sie uns damit einen letzten Blick auf unsere Webseite werfen. Wenn Sie 116 00:11:46,415 --> 00:11:48,050 auf unsere Webseite gehen, 117 00:11:48,050 --> 00:11:49,635 können Sie sehen, dass jetzt 118 00:11:49,635 --> 00:11:56,030 alle Social-Media-Links dort in Social-Media-Schaltflächen umgewandelt wurden. Wenn Sie 119 00:11:56,030 --> 00:11:58,945 auf die Übersichtsseite gehen, 120 00:11:58,945 --> 00:12:03,660 sehen Sie das Gleiche auch auf der Übersichtsseite. 121 00:12:03,660 --> 00:12:07,340 Nachdem Sie diese Übung abgeschlossen haben, 122 00:12:07,340 --> 00:12:16,560 ist dies möglicherweise ein guter Zeitpunkt, um ein gutes Commit mit der Nachricht, Symbolschriftarten, durchzuführen.