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, HTML5' 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:
    4,359
    Đã được thích:
    996
    Đ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ã:
    https://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

    danh sách diễn đàn rao vặt gov chất lượng


Chủ để tương tự : Download cách
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thẻ <METER> Element Tag trong HTML5 cách sử dụng 25/2/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thẻ <PROGRESS> Element Tag trong HTML5 cách sử dụng 25/2/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn cách publish source code game HTML5 lên wep app trên Azure. 23/5/16
Ngôn ngữ lập trình CSS, HTML, HTML5 B4: Cách chèn Flash, File nhạc, File Phim, Bản đồ vào file HTML5 10/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Sự thay đổi cách sử dụng trong html, thay đổi và tối ưu các thẻ trong html 17/2/14

Like và Share ủng hộ ITSEOVN