Giới thiệu về Font Awesome 5 – phông chữ tuyệt vời 5 pro

Bạn đang xem : font awesome 5 pro

Font Awesome

5 Giới thiệu

Font Awesome 5

Font Awesome 5 có phiên bản CHUYÊN NGHIỆP với 7842 biểu tượng và phiên bản MIỄN PHÍ với 1588 biểu tượng. Hướng dẫn này sẽ tập trung vào phiên bản MIỄN PHÍ.

Để sử dụng 5 biểu tượng Free Font Awesome, bạn có thể chọn tải xuống Phông chữ
Thư viện tuyệt vời hoặc bạn có thể đăng ký tài khoản tại Font Awesome và nhận được một
mã (được gọi là KIT CODE) để sử dụng khi bạn thêm Font Awesome vào trang web của mình.

Chúng tôi thích phương pháp KIT CODE hơn. Sau khi nhận được mã, bạn có thể bắt đầu sử dụng
Font Awesome trên các trang web của bạn bằng cách chỉ bao gồm một dòng mã HTML:

& lt; script src = “https://kit.fontawesome.com/yourcode.js” crossorigin = “nặc danh” & gt; & lt; / script & gt;

Ví dụ

Chúng tôi nhận được mã a076d05399 và bằng cách chèn
thẻ script, với mã, chúng ta có thể bắt đầu sử dụng Font Awesome:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; script src = “https://kit.fontawesome.com/a076d05399.js” crossorigin = “nặc danh” & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt; < br />
& lt; i class = “fas fa-clock” & gt; & lt; / i & gt;

& lt; / body & gt;
& lt; / html & gt;

Kết quả là:

Hãy tự mình thử »

Lưu ý: Không cần tải xuống hoặc cài đặt!

Nhận MÃ KIT của riêng bạn

Đăng ký và nhận mã của riêng bạn miễn phí tại:

fontawesome.com

Tính năng mới trong Font Awesome 5

Điểm mới trong Font Awesome 5 là tiền tố fas ,
Font Awesome 4 sử dụng fa .

s trong fas
là viết tắt của solid và một số biểu tượng cũng có chế độ thông thường,
được chỉ định bằng cách sử dụng tiền tố far :

Ví dụ

& lt; i class = “fas fa-clock” & gt; & lt; / i & gt;
& lt; i class = “far fa-clock” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. & lt; i & gt; & lt; span & gt;
các yếu tố được sử dụng rộng rãi cho các biểu tượng.

Cũng xin lưu ý rằng nếu bạn thay đổi kích thước phông chữ hoặc màu sắc của vùng chứa biểu tượng, biểu tượng
những thay đổi. Điều tương tự cũng xảy ra đối với bóng tối và bất kỳ thứ gì khác
kế thừa bằng cách sử dụng CSS.

Ví dụ

& lt; i class = “fas fa-clock” style = “font-size: 120px; color: # 2196F3” & gt; & lt; / i & gt;
& lt; i class = “far fa-clock” style = “font-size: 120px; color: # 2196F3” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng định kích thước

Các
fa-xs ,
fa-sm ,
fa-lg ,
fa-2x ,
fa-3x ,
fa-4x ,
fa-5x ,
fa-6x ,
fa-7x ,
fa-8x ,
fa-9x ,
hoặc các lớp fa-10x được sử dụng để điều chỉnh kích thước biểu tượng liên quan đến vùng chứa của chúng.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-clock fa-xs” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-sm” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-lg” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-2x” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-5x” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-10x” & gt; & lt; / i & gt;

Xem Thêm  Con trỏ trong C: Con trỏ trong Lập trình C là gì? Các loại - con trỏ trong c là gì

Kết quả là:

Hãy tự mình thử »

Biểu tượng danh sách

Các lớp fa-ul fa-li được sử dụng để thay thế các dấu đầu dòng mặc định trong danh sách không có thứ tự.

Ví dụ

Đoạn mã sau:

& lt; ul class = “fa-ul” & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-check-square” & gt; & lt; / i & gt; & lt; / span & gt; Danh sách
Mục & lt; / li & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-spinner fa-xung” & gt; & lt; / i & gt; & lt; / span & gt ;Danh sách
Mục & lt; / li & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-square” & gt; & lt; / i & gt; & lt; / span & gt; Danh sách
Mục & lt; / li & gt;
& lt; / ul & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng hoạt hình

Lớp fa-spin có bất kỳ biểu tượng nào để xoay và fa-xung
lớp có bất kỳ biểu tượng nào để xoay với 8 bước.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-spinner fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-circle-notch fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-sync-alt fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-cog fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-cog fa-xung” & gt; & lt; / i & gt;
& lt; i
class = “fas fa-spinner fa-xung” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Lưu ý: IE8 và IE9 không hỗ trợ hoạt ảnh CSS3.

Biểu tượng được xoay và lật

Các lớp fa-Rot- * fa-flip- * được sử dụng để xoay và lật biểu tượng.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-horse” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-Rot-90” & gt; & lt; / i & gt;
& lt ; i class = “fas fa-horse fa-Rot-180” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-Rot-270” & gt; & lt; / i & gt; < br /> & lt; i class = “fas fa-horse fa-flip-ngang” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-flip-vertical” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng xếp chồng

Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa-stack trên biểu tượng chính,
Lớp fa-stack-1x cho biểu tượng có kích thước thường xuyên và fa-stack-2x cho biểu tượng lớn hơn .

Lớp fa-inverse có thể được sử dụng làm màu biểu tượng thay thế.
Bạn cũng có thể thêm lớn hơn
các lớp biểu tượng cho cha mẹ để kiểm soát thêm kích thước.

Ví dụ

Đoạn mã sau:

& lt; span class = “fa-stack fa-lg” & gt;
& lt; i class = “fas fa-circle
fa-stack-2x “& gt; & lt; / i & gt;
& lt; i class =” fab fa-twitter fa-stack-1x fa-inverse “& gt; & lt; / i & gt;
& lt; / span & gt;
fa-twitter (nghịch đảo) trên fa-circle (solid) & lt; br & gt;

Xem Thêm  Phương thức Java String indexOf () - chỉ mục java của char

& lt; span class = “fa-stack
fa-lg “& gt;
& lt; i class =” far fa-circle fa-stack-2x “& gt; & lt; / i & gt;
& lt; i
class = “fab fa-twitter fa-stack-1x” & gt; & lt; / i & gt;
& lt; / span & gt;
fa-twitter trên fa-circle
(thông thường) & lt; br & gt;

& lt; span class = “fa-stack fa-lg” & gt;
& lt; i class = “fas fa-camera
fa-stack-1x “& gt; & lt; / i & gt;
& lt; i class =” fas fa-ban fa-stack-2x text-risk ”
style = “color: red;” & gt; & lt; / i & gt;
& lt; / span & gt;
fa-ban on fa-camera

Kết quả là:

Hãy tự mình thử »

Biểu tượng chiều rộng cố định

Cũng giống như các chữ cái và các ký tự khác, các biểu tượng có thể có các chiều rộng khác nhau và
nếu bạn cần căn chỉnh theo chiều dọc các biểu tượng như trong danh sách hoặc menu, đây có thể là
vấn đề.

Lớp fa-fw được sử dụng để đặt các biểu tượng tại
chiều rộng cố định.

Ví dụ

& lt; p & gt; Chiều rộng cố định: & lt; / p & gt;
& lt; div & gt; & lt; i class = “fas fa-arrows-alt-v fa-fw” & gt; & lt; / i & gt; Biểu tượng
1 & lt; / div & gt;
& lt; div & gt; & lt; i class = “fas fa-band-aid fa-fw” & gt; & lt; / i & gt; Biểu tượng
2 & lt; / div & gt;
& lt; div & gt; & lt; i
class = “fab fa-bluetooth-b fa-fw” & gt; & lt; / i & gt; Biểu tượng 3 & lt; / div & gt;

& lt; p & gt; without Fixed
Chiều rộng: & lt; / p & gt;
& lt; div & gt; & lt; i class = “fas fa-arrows-alt-v” & gt; & lt; / i & gt; Biểu tượng 1 & lt; / div & gt;
& lt; div & gt; & lt; i
class = “fas fa-band-aid” & gt; & lt; / i & gt; Biểu tượng 2 & lt; / div & gt;
& lt; div & gt; & lt; i class = “fab fa-bluetooth-b” & gt; & lt; / i & gt; Biểu tượng
3 & lt; / div & gt;

Kết quả là:

Hãy tự mình thử »

Các biểu tượng có viền và kéo

fa-border , fa-pull-right hoặc fa-pull-left
các lớp được sử dụng cho các dấu ngoặc kép hoặc biểu tượng bài viết.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-quote-left fa-3x fa-pull-left fa-border” & gt; & lt; / i & gt;
Lorem ipsum đau sit amet, consectetur adipisicing ưu tú, bởi vì eiusmod tempor incididunt out chuyển dạ và đau magna aliqua. Và một số và tối thiểu, những người không tập thể dục thậm chí cần lao động và kết quả là một người yêu cũ một chút và thoải mái. Duis aute irure dolor in repmblenderit in voluptate velit esse cillum dolore eu fugiat nulla pariesur.

Kết quả là:

không khả dụng

Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề phông chữ tuyệt vời 5 pro

Write On Text Effect – Final Cut Pro and Motion 5 Tutorial 2019

  • Tác giả: Serge M
  • Ngày đăng: 2019-05-20
  • Đánh giá: 4 ⭐ ( 1806 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Use a combination of Final Cut Pro & Motion 5 to create a cool write on text effect. This effect can be done with any font, but handwritten style fonts work best. We’ll start in Motion 5, where we’ll create and customize our title. We’ll then use the Paint Stroke tool to create an image mask, to reveal the text as if it’s being written on. This title can now be published to Final Cut Pro, to be used in your next project.

    ▶️ Download Luna Font here – https://www.dafont.com/luna-2.font

    LEARN MORE:

    Visit My Website: https://www.1913media.com
    Support Me on Patreon: https://www.patreon.com/serge_m
    Follow Me On Twitter: https://twitter.com/yt_serge_m

    GEAR & SERVICES USED:

    Monitor – geni.us/yHTbyri
    Keyboard – https://frstre.com/go/?a=10799-eb8580&s=1327401-114b5f
    Mouse – https://geni.us/60SlbrB
    External Drive – https://geni.us/AZk6q
    Drone: https://geni.us/fAXrOK
    Big Camera: https://geni.us/xVLBS
    Camera Lens: https://geni.us/a1rF7
    Action Camera: https://geni.us/bb97pou
    Gimbal: https://geni.us/fOy0
    Mic: https://geni.us/zswzd
    Accent Light – https://geni.us/KRqrfS
    Epidemic Sound: http://share.epidemicsound.com/serge
    Artlist.io – https://bit.ly/3jrKmuj
    Envato Elements: https://1.envato.market/53AkL

    DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for your support, so I can continue to provide you with free content each week!

    FCPX FinalCutPro LPTGuy

Download font chữ Calligraphy Việt hóa Full mới nhất

  • Tác giả: tienichit.com
  • Đánh giá: 5 ⭐ ( 8135 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Font chữ Calligraphy theo tiếng Hy Lạp cổ đại. Font này nặng ở việc thiết kế, thể hiện các con chữ, bằng cọ viết hoặc dụng cụ có ngòi viết.

Gõ Tiếng Việt

  • Tác giả: gotiengviet.com.vn
  • Đánh giá: 3 ⭐ ( 7652 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có một số phông chữ miễn phí mà rất tuyệt vời trên mạng. Dưới đây là những mẫu Font tốt nhất được tuyển chọn từ những font chữ đó dành cho bạn

35 font chữ miễn phí tốt nhất mà bạn nên tải xuống

  • Tác giả: genzacademy.vn
  • Đánh giá: 5 ⭐ ( 1779 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Không phải lúc nào bạn cũng cần đồ họa, hình ảnh để làm cho thiết kế của mình nổi bật – đôi khi phông chữ phù hợp lại có tác dụng phụ trợ cho dự án thiết kế của bạn. Nhưng việc đi đến mọi ngóc ngách của Internet là điều không khả thi đối với hầu hết các nhà thiết kế (graphic designer) và nhà tiếp thị (marketer) nếu như ấn phẩm không được bắt mắt thu hút người xem.

Download Font UVF Candlescript Pro Việt Hóa

  • Tác giả: www.cachhaynhat.com
  • Đánh giá: 5 ⭐ ( 8220 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cachhaynhat.com chia sẻ Font UVF Candlescript Pro Việt hóa. Phông chữ Candlescript Pro được thiết kế bởi M Fairuzulhaq aka Ve, người sáng l

Tải xuống Lemon Milk Pro Font OTF

  • Tác giả: simplyfont.com
  • Đánh giá: 4 ⭐ ( 2343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lemon Milk Pro Font, OTF download free

Font Awesome: Hướng dẫn thư viện hoàn chỉnh

  • Tác giả: www.wcido.com
  • Đánh giá: 3 ⭐ ( 3226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu tượng miễn phí phông chữ tuyệt vời: nó là gì và những gì nó được…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tổng hợp vector trong C++ - hàm trong java