Thủ Thuật Font Awesome là gì, cách sử dụng Font Awesome trong thiết kế web và đồ họa

Thảo luận trong 'Thiết Kế - Lập Trình' bắt đầu bởi Hoàng Anh, 19/7/17.

  1. Nếu bạn có nhu cầu quảng cáo trên diễn đàn, hãy liên lạc ngay admin@itrum.net
  1. Thủ Thuật - Font Awesome là gì, cách sử dụng Font Awesome trong thiết kế web và đồ họa

    Thủ Thuật - Font Awesome là gì, cách sử dụng Font Awesome trong thiết kế web và đồ họa

    Thiết Kế - Lập Trình, 19/7/17. Trả lời: 0, Xem: 132

    Hoàng Anh
    [​IMG]
    Chào mọi người, như các bạn đã biết, hiện nay các website hiện nay đều không thể thiếu các icon để bổ sung để làm đẹp cho web, tăng độ hiện đại cho web, và cũng thiết kế đồ họa cũng vậy, đôi khi chúng ta cũng cần sử dụng đến các icon vào một mục đích nào đó như làm CV chả hạn, nhưng chúng ta sẽ phải vẽ ra các icon ấy rất là tốn thời gian và chưa chắc đã đẹp như ý muốn và khi chỉnh sửa chúng ta phải vào lại PS hoặc AI thì nó sẽ rất rắc rồi, vì lý do đó hôm nay tôi sẽ giới thiệu cho các bạn Font Awesome một loại font chữ dạng icon đã được cung cấp sẵn và chỉ cần sử dụng vào mục đích của chúng ta thôi.

    Chúng ta sẽ có hai phần, phần sử dụng trong thiết kế web và sử dụng trong thiết kế đồ họa!

    Sử dụng trong thiết kế web
    Bước 1: Chúng ta cần thêm font vào vào file html.
    Chúng ta sẽ có 2 cách, nhưng mình sẽ hướng dẫn cho các bạn cách dễ hiểu nhất và rút ngắn được thời gian của các bạn:
    Chúng ta sẽ sử dụng link CDN (Content Delivery Network): Các bạn dán đoạn code sau vào trong thẻ head của html:

    Mã:
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    Sau khi thêm đoạn code trên vào, ta được cấu trúc html sau:

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Demo</title>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
       
    </body>
    </html>
    

    Bước 2: Sử dụng font, các bạn vào link fontawesome.io/icons/ click vào icon mình muốn sử dụng. Sau đó copy đoạn code bắt đầu bằng thẻ <i> vào phần body của file html.

    [​IMG]

    [​IMG]
    Ta được cấu trúc file html như sau, mở file trên trình duyệt để thấy kết quả.
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Demo</title>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <i class="fa fa-facebook" aria-hidden="true"></i>
    </body>
    </html>
    

    [​IMG]

    Đừng thắc mắc tại sao nó lại nhỏ tí tẹo, tại vì ta đã style cho nó đâu. Vì đây là 1 loại font nên ta sẽ phải sử dụng các thuộc tính của font chữ cho nó.
    Ví dụ: ta muốn tạo icon facebook có kích thước là 100px, màu xanh thì ta sẽ làm như sau.

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Demo</title>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
            i.fa-facebook {
                color: darkblue;
                font-size: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <i class="fa fa-facebook" aria-hidden="true"></i>
    </body>
    </html>
    

    [​IMG]
    Sử dụng trong thiết kế đồ họa
    Bước 1: Các bạn vào fontawesome.io download font về máy, cách download thì bạn xem ở bước 1 phần sử dụng trong thiết kế web. Sau đó các bạn giải nén ra và vào thư mục font, click phải vào file FontAwesome.otf, chọn install để cài font vào máy.​
    [​IMG]

    Bước 2: Các bạn mở các phần mêm đồ họa như AI hoặc PS, ở đây mình dùng Photoshop để làm demo, sau đó các bạn vào trang fontawesome.io/cheatsheet các bạn bôi đen và copy hình bạn cần dùng, rồi vào Photoshop, dùng công cụng cụ text rồi paste vào.

    [​IMG]

    [​IMG]

    [​IMG]
    Bước 3: Ở bước 2, ta đã thấy rằng nó xuất hiện một lỗi ở đây, đó là khi paste vào nó lại không hiện icon đúng mà nó hiện ra hình một ô vuông có gạch chéo. Lỗi ở đây là do chúng ta chưa đặt thuộc tính là Font Awesome, bây giờ chỉ cần đặt tên font là hoàn tất, chúng ta sẽ bôi đen phần text hay còn gọi là phần icon, sau đó click vào phần lựa chọn font ở bên trên thanh công cụ chọn Font Awesome


    [​IMG]

    [​IMG]

    [​IMG]
    Các bạn cũng có thể thay đổi màu sắc font chữ nhờ vào thanh công cụ.

    Chúc các bạn thành công!
     

trang này

Banner Header Fshare