Bây giờ chúng ta hãy chuyển sang bài tập tiếp theo của chúng tôi,
nơi chúng ta sẽ tìm hiểu thêm về phông chữ Icon.
Chúng tôi sẽ tải về Font Awesome,
và sau đó bao gồm nó trong thiết kế trang web của chúng tôi.
Và chúng tôi cũng sẽ tải về bootstrap xã hội và
thiết kế một số bằng sáng chế xã hội để được đưa vào sân.
Để bắt đầu, hãy vào thư mục nhầm lẫn trong cửa sổ thiết bị đầu cuối của bạn,
và chúng tôi sẽ sử dụng npm để đi và lấy Font Awesome cho chúng tôi.
Vì vậy, tại dấu nhắc, gõ npm cài đặt font-awesome trừ đi lưu.
Vì vậy, điều này sẽ lấy Font Awesome vào thư mục không ai của chúng tôi.
Và đồng thời, nó sẽ thêm Font Awesome vào tập tin package.json của chúng tôi như là một phụ thuộc.
Khi Font Awesome được lấy,
sau đó chúng ta có thể đi trước để làm cho sử dụng nó trong trang web của chúng tôi.
Bước tiếp theo là lấy bootstrap xã hội và cài đặt nó vào dự án của chúng tôi.
Vì vậy, để làm điều đó, tại dấu nhắc loại npm
cài đặt bootstrap-social @5 .1.1
trừ đi lưu.
Và điều này sẽ lấy bootstrap xã hội và cài đặt nó vào dự án của chúng tôi.
Bây giờ, chúng ta cần phải sử dụng phông chữ này năm,
đó là phông chữ tuyệt vời, và bootstrap xã hội trong trang web của chúng tôi.
Vì vậy, đi đến index.html ngay ở đầu trang,
ngay trước khi tập tin style.css,
tôi sẽ nhập khẩu cả Font Awesome và bootstrap xã hội.
Vì vậy, ngay tại đó, chúng ta hãy gõ liên kết
rel stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Vì vậy, chúng ta hãy
nhập vào tập tin index.html của chúng tôi tương tự,
cho nhập khẩu bootstrap xã hội.
Vì vậy, node_modules/bootstrap-social/bootsrap-social.css.
Vì vậy, hai chúng tôi sẽ bao gồm vào index.html của chúng tôi.
Tương tự như vậy, tôi cần phải bao gồm cả hai này vào aboutus.html của tôi Vì vậy, hãy
để tôi sao chép điều đó và di chuyển qua aboutus.html và sau đó dán đó vào aboutus.html cũng.
Bây giờ, trở lại index.html chúng tôi sẽ không sử dụng các biểu tượng Font Awesome,
và cũng là biểu tượng xã hội bootstrap trong trang index.html của chúng tôi.
Đi đến thanh điều hướng đó trong trang index.html,
ngay trong liên kết này cho trang chủ của họ,
Tôi sẽ đi vào và thêm rằng phông chữ tuyệt vời mã.
Vì vậy, tôi sẽ nói nhịp lớp fa fa-nhà.
Vì vậy, fa nói rằng tôi đang áp dụng các lớp Font Awesome,
fa nhà là biểu tượng cụ thể cho biểu tượng nhà.
Vì vậy, đó là những gì tôi muốn sử dụng trên trang chủ của tôi.
Và sau đó đóng thẻ săng- và sau đó sau khi không gian, nút home.
Vì vậy, điều đó sẽ bao gồm các biểu tượng nhà trong đó.
Tôi sẽ sao chép này và sau đó cho về,
Tôi sẽ sử dụng cùng một điều nhưng thay vì fa-home, vì
vậy thông báo cho một không gian giữa thẻ khoảng đóng và
về và thay vì fa-home tôi sẽ nói fa-info.
Bây giờ chúng, tôi đã tìm ra rằng đây là những biểu tượng mà tôi muốn sử dụng.
Bạn có thể kiểm tra tài liệu Font Awesome để tìm
hiểu những biểu tượng cụ thể và cách bạn bao gồm chúng.
Đối với menu tôi sẽ sử dụng một biểu tượng danh sách ở đó.
Tôi gọi biểu tượng đó là danh sách fa-list.
Bây giờ, tôi cũng sẽ sử dụng các biểu tượng có kích thước lớn hơn.
Vì vậy, tôi cũng sẽ bao gồm fa-lg
vào các lớp biểu tượng fa-lg.
Bây giờ để liên lạc tôi sẽ sử dụng fa-home,
và sau đó nếu đây là fa-địa chỉ thẻ fa-lg và lưu những thay đổi.
Bạn nên lặp lại cùng,
bổ sung các biểu tượng tương tự ngay cả trong trang aboutus.html,
và sau đó chúng tôi sẽ xem trang web của chúng tôi sau khi chúng tôi hoàn thành các thay đổi.
Sau khi sửa đổi cũng aboutus.html và index.html bao gồm các biểu tượng,
Tôi đã lưu các thay đổi và sau đó ở đây tôi đang ở trang web của tôi và lưu ý
làm thế nào các biểu tượng này đã được đưa vào thanh điều hướng của tôi.
Vì vậy, bạn có thể thấy rằng có một biểu tượng nhà ở phía trước của nhà,
có một biểu tượng thông tin ở phía trước của khoảng,
một biểu tượng danh sách ở phía trước của menu và một biểu tượng thẻ địa chỉ ở phía trước của liên lạc.
Vì vậy, đây là một cách tốt đẹp để thêm một số yếu tố trực quan vào trang web của bạn.
Bây giờ, điều này thật tuyệt vời.
Bây giờ những gì tôi muốn làm là làm việc để cập nhật các cảnh quay.
Bây giờ, tôi muốn thay thế fax điện thoại và email bằng các biểu tượng và
cũng biến tất cả những thứ này thành các nút truyền thông xã hội ở đây.
Vì vậy, để làm điều đó, chúng tôi sẽ làm cho sử dụng Font Awesome cho điều này,
và sau đó chúng tôi sẽ làm cho sử dụng bootstrap xã hội cho điều này.
Đi đến chân trang index.html,
tôi sẽ thay thế điện thoại bằng biểu tượng Font Awesome.
Vì vậy, tôi sẽ nói, “i” như tôi đã đề cập,
bạn có thể sử dụng span hoặc tôi để chỉ định các biểu tượng Font Awesome.
Trang web Font Awesome sử dụng tôi nhưng tôi đang cho bạn thấy hai cách có thể làm những điều này.
Vì vậy, tôi nói fa fa-tel,
Tôi xin lỗi fa-điện thoại và đóng thẻ ở đây.
Và đối với fax, tôi sẽ chỉ cần sao chép nó,
và sau đó cho fax nếu nó là fa-fax,
và cho email nó là fa-envelope và lưu thay đổi.
Bây giờ áp dụng tương tự cho trang aboutus.html.
Đi đến trang web của tôi,
bạn ngay lập tức nhận thấy rằng điện thoại, fax
và email, bây giờ được thay thế bằng các biểu tượng tương ứng.
Bây giờ bước cuối cùng là sử dụng bootstrap social để thay thế
tất cả các liên kết này bằng các nút truyền thông xã hội.
Để thực hiện điều đó,
chúng tôi sẽ đi đến chân trang và sau đó thay thế mỗi trong số
này với các biểu tượng tương ứng của họ ở đó.
Vì vậy, tôi có thể nói, tôi lớp F
ont Awesome fa-google-plus và
đóng thẻ đó.
Và sau đó tôi chỉ đơn giản là sẽ sao chép điều này và sau đó áp dụng tương tự cho những người còn lại.
Vì vậy, tôi sẽ nói, Facebook,
LinkedIn, Twitter,
YouTube, và cuối cùng cho thư tôi sẽ
sử dụng một biểu tượng phong bì ở đó.
Ngoài ra, để biến điều này thành các bằng sáng chế xã hội bootstrap cho các thẻ A,
chúng ta nên áp dụng các lớp học như nút nút xã hội biểu tượng,
và sau đó nút-google làm tương tự với những người còn lại.
Đối với thứ hai nó sẽ là Facebook,
sau đó LinkedIn,
Twitter, Google và sau đó cho người cuối cùng,
vì chúng tôi không có một nút biểu tượng xã hội bootstrap tương ứng cho thư,
chúng tôi sẽ không có bất cứ điều gì ngoại trừ nút biểu tượng xã hội.
Bây giờ với điều này, chúng ta hãy đi và có một cái nhìn nhanh vào chân trang của chúng tôi.
Đi đến chân trang của bạn, bây giờ bạn có thể thấy tất cả các nút
đã được biến thành các nút xã hội tương ứng của họ ở đó.
Chúng ta hãy làm thay đổi tương tự cho chân trang trong aboutus.html.
Vì vậy, tôi chỉ sao chép mã đó ở đó và sau đó đi đến aboutus.html,
và sau đó chỉ đơn giản là thay thế trong chân trang của aboutus.html.
Với điều đó, chúng ta hãy xem một cái nhìn cuối cùng tại trang web của chúng tôi.
Đi đến trang web của chúng tôi,
bạn có thể thấy rằng bây giờ
tất cả các liên kết truyền thông xã hội đã được biến thành các nút truyền thông xã hội ở đó.
Đi đến trang giới thiệu,
bạn sẽ thấy điều tương tự trong trang giới thiệu cũng.
Bây giờ bạn đã hoàn thành bài tập
này, đây có thể là thời điểm tốt để thực hiện một cam kết tốt với thư, phông chữ biểu tượng.