Trong một bài học trước đó,
bạn đã học cách đưa hình ảnh vào trang web của bạn.
Đôi khi, mọi người không thực sự chắc chắn nơi để
tìm hình ảnh hoặc họ không phải là những nghệ sĩ giỏi.
Vì vậy, hôm nay, tôi muốn nói về việc sử dụng Font Awesome.
Font Awesome là một bộ sưu tập các biểu tượng mà bạn có thể sử dụng cho
trang của bạn và họ là khá nhiều trên toàn thế giới nhận ra.
Ở đây tôi đang ở trang Font Awesome.
Tôi muốn chỉ cho bạn cách sử dụng nó.
Điều đầu tiên tôi sẽ làm là đi đến lựa chọn biểu tượng.
Như bạn thấy, có hàng ngàn biểu tượng khác nhau mà bạn có thể chọn
để giúp trang trí trang của bạn và nó rất đơn giản để bạn sử dụng.
Bước đầu tiên là bạn cần phải nói với trang web của bạn,
hey, tôi muốn sử dụng Font Awesome.
Trong phần bắt đầu của Font Awesome, họ cung cấp cho bạn mã.
Vì vậy, để tôi cho các bạn thấy nó trông như thế nào.
Ở đây tôi với một tập tin đơn giản.
Điều duy nhất trông mới mẻ với các bạn là tôi có hai ý tưởng độc đáo.
Đầu tiên là tôi có một liên kết trong phần đầu của trang của tôi.
Hãy nhớ rằng, người đứng đầu là nơi chúng tôi giữ
tất cả những thông tin bổ sung mà không phải lúc nào cũng nhìn thấy bởi người dùng,
và những gì tôi đã làm ở đây là tôi đã kết nối với Font Awesome CDN.
Đó là một từ viết tắt rất đáng sợ chỉ có nghĩa là Mạng phân phối nội dung.
Bạn về cơ bản đang thực hiện một thỏa thuận nơi, hey,
tôi sẽ liên kết và sử dụng công cụ của bạn nhưng tôi sẽ sử dụng
liên kết đặc biệt này để bạn biết có bao nhiêu người đang sử dụng nó.
Nếu chúng ta đi xuống phần cơ thể,
đó là khi bạn sẽ thấy một thẻ mới,
thẻ i, nó là viết tắt của biểu tượng.
Bạn có nhớ thẻ hình ảnh không?
Một trong những điều bạn cần phải có nếu bạn đang sử dụng thẻ hình ảnh là nguồn,
hình ảnh bạn muốn sử dụng.
Với Font Awesome, bạn phải bao gồm một thẻ class,
và trong thẻ class,
bạn sẽ cho nó biết hình ảnh bạn muốn sử dụng.
Vì vậy, trong trường hợp này,
tôi đang sử dụng cái gọi là fa-angry.
Chúng ta hãy tiếp tục và xem trang này trông như thế nào.
Vâng, chúng tôi kết thúc với một người nhỏ giận dữ đang nhìn chằm chằm vào chúng tôi.
Nó thực sự là thực sự đơn giản.
Bạn sẽ nhận được một biểu tượng rất nhỏ mỗi khi bạn bao gồm thẻ này.
Bây giờ, trong tất cả sự trung thực,
màn hình của tôi được thổi lên thực sự lớn vì vậy nếu bạn đã chạy mã này,
biểu tượng sẽ được thực sự nhỏ.
Vì vậy, để tôi chỉ cho bạn một số tùy chọn bạn có thể làm để điều chỉnh kích thước của biểu tượng của bạn.
Vì vậy, những gì tôi đã làm là tôi đã đi vào và sao chép dòng
mã một vài lần và trong mỗi một,
tôi đã thêm một thuộc tính bổ sung và đó là kích thước mà tôi muốn biểu tượng được.
Vì vậy, ngay đây, tôi nói làm cho biểu tượng đó trở nên nhỏ hơn và sau đó tôi đã làm trung bình và lớn.
Các 2x, 3x, 5x,
10x, vv, điều đó chỉ làm cho nó lớn hơn nhiều mỗi lần.
Vì vậy, bây giờ, nếu tôi nhìn vào trang một lần nữa,
nó chắc chắn sẽ trông hơi khác một chút.
Trong thực tế, nó quá lớn đối với màn hình vì vậy hãy để
tôi làm cho nó nhỏ hơn một chút, và ở đó bạn có nó.
Chúng tôi có các biểu tượng với các kích cỡ khác nhau.
Gương mặt giận dữ rõ ràng không phải là người duy nhất bạn có thể làm được.
Một số trong những cái phổ biến hơn bạn có thể thấy bao gồm thẻ địa chỉ.
Vì vậy, tôi sẽ sao chép nó. Nó luôn luôn bắt đầu như thẻ i với lớp, bằng,
bạn cần phải có fas cho Font Awesome,
và sau đó thay vì tức giận,
chúng ta hãy đi trước và thử một thẻ địa chỉ.
Cái này hy vọng sẽ trông khá quen thuộc với bạn.
Tôi sẽ đặt một đoạn ngắt dòng chỉ để trộn lẫn mọi thứ một chút ở đó.
Bây giờ, khi tôi làm mới trang,
bạn có thể thấy một thẻ địa chỉ rất quen thuộc.
Các biểu tượng là tuyệt vời bởi vì họ cung cấp cho trang của bạn loại
nhìn thực sự quen thuộc mà mọi người làm cho nó nghĩ rằng nó trông thực sự chuyên nghiệp.
Nhưng có một số nhược điểm khi sử dụng các biểu tượng nếu bạn không cẩn thận.
Điều quan trọng nhất là chúng không nhất thiết phải có thể truy cập theo mặc định.
Vì vậy, nếu bạn bật một trình đọc màn hình trên trang này,
nó sẽ thực sự hiển thị như thể không có nội dung ở tất cả.
Hoặc thậm chí tệ hơn, đôi khi mọi người sử dụng các biểu tượng cho các liên kết truyền thông xã hội.
Vì vậy, để tôi cho bạn thấy một ví dụ nữa trước khi chúng tôi đang thực hiện với Font Awesome.
Vì vậy, những gì tôi đã làm ở đây là thay vì chỉ sử dụng các biểu tượng như trang trí,
tôi đã thực sự đặt chúng vào trang web của
tôi để nếu tôi muốn nói liên kết đến tài khoản Twitter của tôi,
ngay dưới đây, tôi sẽ bao gồm biểu tượng Twitter.
Nếu tôi muốn kết nối với Pinterest,
tôi có thể sử dụng biểu tượng Pinterest này ngay tại đó,
và LinkedIn, và nó thực sự trông thực sự tốt. Để tôi chỉ cho anh xem.
Ở đây chúng tôi đi, tôi đã có mỗi liên kết của tôi.
Chỉ cần để bạn biết, lý do các biểu tượng này là màu xanh là,
một lần nữa, bởi vì chúng là các liên kết,
và trên mỗi cái, tôi có thể nhấp vào nó và nó sẽ đưa tôi vào tài khoản của mình.
Vấn đề là đây.
Nó trông tuyệt vời nhưng tôi sẽ chạy
một Wave validator kiểm tra nhanh chóng trên nó để xem nếu mã của tôi là ngữ nghĩa chính xác.
Vì vậy, tôi sẽ đi đến phiên bản lưu trữ của tôi.
Nó có ở đây không? Để tôi tìm nó.
Vì vậy, tôi không sử dụng mã mà tôi chỉ sử dụng bởi vì để xác nhận,
tôi muốn đi trước và đặt nó trên máy chủ.
Vì vậy, tôi sẽ đi lên và tôi sẽ bấm vào công cụ xác nhận Wave của tôi,
và wave sẽ đi qua và cho tôi ba lỗi.
Không chỉ có ba lỗi,
nhưng ba lỗi rất quan trọng,
và đó chỉ đơn giản là,
hey, bạn có ba liên kết và họ không thực sự có bất kỳ văn bản nào.
Một người nào đó đang sử dụng bộ đọc màn hình sẽ
không biết liên kết này được cho là phải đi đến đâu.
Nó không biết rằng đây là Twitter hoặc Pinterest hoặc LinkedIn.
Nhưng tôi có một sửa chữa nhanh chóng thực sự đơn giản cho điều đó.
Tôi sẽ sử dụng một cái gì đó gọi là một nhãn aria hoặc trong
một thẻ của tôi hoặc thực sự trong thẻ biểu tượng là tốt.
Tôi chỉ đơn giản là đặt aria-nhãn bằng,
và trong trường hợp này, tôi sẽ đặt Twitter.
Trên phần tiếp theo, tôi có thể thêm aria-label bằng Pinterest, vv
Bằng cách thêm vào các nhãn aria này,
bạn về cơ bản cung cấp cho người đọc màn hình khả năng
nói với ai đó nơi liên kết này sẽ đi để đọc một nhãn,
và điều này là rất lớn về khả năng truy cập.
Vì vậy, tôi hy vọng bạn có niềm vui bằng cách sử dụng Font Awesome.
Có rất nhiều người khác nhau bạn có thể lựa chọn
nhưng nếu bạn đang đi chơi với một số trong những thủ thuật thú vị này,
hãy chắc chắn rằng bạn đang làm cho họ có thể truy cập cho càng nhiều người càng tốt.