Download và cách sử dụng font awesome tạo icon cho website

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML' bắt đầu bởi admin, 28/9/16.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,746
    Đã được thích:
    716
    Điểm thành tích:
    113
    Giới tính:
    Nam
    (Font Awesome) Tạo icon cho web giúp khách hàng tiếp cận và hiểu rõ hơn nội dung của link được liên kết khá quan trọng, khi add các icon thường khó khăn vì phải lên mạng download về và cắt gép khiến nhiều lập trình viên bực mình.

    Nay itseovn hướng dẫn các bạn cách tạo icon cho web bằng Font Awesome chuyên nghiệp.

    icon-web-salegiatot.com.jpg

    Gắn icon tại Font Awesome cho web salegiatot.com

    font-awesome-list-icon-cho-web.jpg

    List icon tại Font Awesome
    Bước 1: download phiên bản mới nhất của Font Awesome tại 1 trong 2 link dưới:
    • Download tại trang chủ, bằng cách truy cập trang chủ link dưới.
    Mã:
    http://fontawesome.io
    
    • Tiếp theo ấn Download như hình dưới.
    download-font-awesome-new.jpg
    • Tiếp theo chọn : No thanks, just download Font Awesome
    su-dung-font-awesome-cho-web.jpg
    • Hoặc Download tại ITSEOVN phiên bản Font Awesome 4.6.3 mới nhất 2016 link dưới.
    Mã:
    http://itseovn.com/i/file/font-awesome-4.6.3.zip
    
    Bước 2: Cài đặt Font Awesome cho web.
    • Download về xong bạn giải nén ra và copy 2 folder "css" và "fonts" vào thư mục gốc của web.
    • Sau đó bạn vào file code cần chạy khai báo như sau:
    Mã:
    Đối với code asp.net: <link rel="stylesheet" href="<%=  ResolveUrl("~/") %>css/font-awesome.min.css" />
    
    Mã:
    Đối với code PHP: <link rel="stylesheet" href="../css/font-awesome.min.css" />
    
    Bước 3: Cách sử dụng Font Awesome.
    • Truy cập vào trang chủ icon của Font Awesome để tìm kiếm icon cần gắn.
    Mã:
    http://fontawesome.io/icons
    
    • Tại đây bạn điền tên icon bạn cần gắn như số 1 ở dưới: VD mình tìm icon home.
    • Sau đó bạn click vào icon home nếu có như hình số 2 ở dưới.
    tim-home-icon.jpg
    • Khi click vào icon Home bạn sẽ có 1 đoạn code, bạn chỉ cần copy hêt đoạn code đó cho vào web, nơi bạn cần hiển thị icon là được.
    Mã:
    <i class="fa fa-home" aria-hidden="true"></i>
    
    • Demo là hình trên cùng nhé.
    code-fa-home.jpg
     
    Cảm ơn đã xem bài:

    Download và cách sử dụng font awesome tạo icon cho website

    Đang tải...


: font awesome

Like và Share ủng hộ ITSEOVN