Cách Sử Dụng Font Awesome Trong Photoshop, Cách Sử Dụng Font Awesome – Amade Graphic

Để website thích mắt và thân thiện hơn, người ta thường dùng những icon ( ký hiệu ) để phong cách thiết kế website. Và Font Awesome là một thư viện chứa font chữ ký hiệu ( icon ). Người dùng sễ sử dụng những kí tự icon này để phong cách thiết kế ( layout ) Website. Mời bạn cùng tìm hiểu và khám phá chi tiết cụ thể về Font Awesome cũng như cách sử dụng font awesome chuẩn nhất .Bạn đang xem : Cách sử dụng font awesome trong photoshop1. Vậy Font Awesome là gì ?

Thuật ngữ Font Awesome dùng để chỉ một thư viện chứa các font chữ ký hiệu thường dùng trong thiết kế website. Trong đó, font chữ ký hiệu chính là các icons mà ta thường thấy xuất hiện trên website.

Bạn đang đọc: Cách Sử Dụng Font Awesome Trong Photoshop, Cách Sử Dụng Font Awesome

Nó gồm nhiều định dạng file font khác nhau cho người dùng lựa chọn : otf, eot, ttf, woff, svg … Và hầu hết những hệ điều hành quản lý máy tính đều hoàn toàn có thể chạy Font Awesome cách thuận tiện .Với thư viện này, bạn không riêng gì tạo ra những icons thường thì mà còn tạo được những icons động. Nếu muốn tạo icons động, bạn cần biết cách tích hợp với CSS3. Điểm điển hình nổi bật của những mẫu sản phẩm được tạo ra từ cách này chính là sự đẹp mắt và hấp dẫn người nhìn .Nếu như trước đây, muốn tao ICON, người ta phải cắt chúng ra từ file PSD và dùng CSS để gán vào màu nền, ảnh nền. Một cách khác bạn hoàn toàn có thể dùng là dùng thẻ img để đưa ICON đó vào .Trong đó :CSS : là thuật ngữ chỉ ngôn từ trình diễn được dùng để tạo kiểu cho sự Open của nội dung. Nó sẽ gồm có những yếu tố như sắc tố, phông chữ hoặc những yếu tố tương quan …PSD : Là một tệp hình ảnh được lưu dưới định dạng gốc. PSD sẽ gồm những lớp hình ảnh xuất ra từ ứng dụng Adobe Photoshop .Thẻ IMG : Đây là loại thẻ mà người dùng sẽ sử dụng để chèn hình ảnh vào website .Sử dụng hình ảnh PSD để tạo icon sẽ khiến cho vận tốc load của website chậm hơn. Tuy nhiên, với Font Awesome, nó sẽ cải tổ điều này. Bởi vì, bạn chỉ duy nhất phải load file CSS, một file Font một lần .Hơn thế nữa, thư viện Font Awesome cũng được cho phép người dùng thuận tiện đổi khác size và sắc tố của icon. Hoặc tùy chỉnh những thuộc tính như font-size, color …Việc sử dụng linh động Font Awesome giúp cho lập trình viên thuận tiện phong cách thiết kế website hơn. Đồng thời, giao diện web trông cũng thích mắt và thân thiện hơn .Xem thêm : Khám Bệnh Viêm Đường Tiết Niệu Khám Ở Đâu Tốt Và Uy Tín ? Viêm Đường Tiết Niệu Khám Ở Bệnh Viện Nào*Thư viện chứa những font chữ ký hiệu được gọi là Font Awesome .2. Cách sử dụng thư viện Font Awesome để thiết kế xây dựng WebsiteĐể sử dụng Font Awesome, bạn vào trang chủ và tải về thư viện Font Awesome. Sau đó, nhúng nó vào Layout trước khi sử dụng. Một cách khác là bạn hoàn toàn có thể sử dụng link CDN nó phân phối cho tất cả chúng ta để sử dụng .Để tải từ trang chủ, bạn truy vấn link :https://fontawesome.com/?from=ioBạn hoàn toàn có thể chọn Bắt đầu không tính tiền để tải về và sử dụng. Hoặc mua bản Pro để nhận được nhiều hơn .Với cách sử dụng link CDN, bạn sẽ cần nhúng đường dẫn sau vào đầu thẻ trong html :

Xem thêm: Cách sử dụng patch tool trong photoshop

Sau khi thêm đường dẫn thành công xuất sắc, bạn truy vấn vào thư viện và chọn cho mình những icon tương thích. Bạn hoàn toàn có thể thêm icon vào đằng trước hoặc đằng sau những thẻ HTML. Để làm được điều này, bạn sử dụng hai thuộc tính là after và before. Cụ thể, chúng tôi sẽ ra mắt dưới đây :2.1 Cách sử dụng : after để thêm Font AwesomeVới cách này, bạn thực thi như sau :Chúng tôi lấy ví dụ là một đoạn HTML như ảnh dưới :*Để thêm ký hiệu chỉ tay đằng sau câu “ Chào mừng bạn đến với Ngọc Thắng ” thì trong file css ta làm như sau :*Kết quả sau khi triển khai ta được :*2.2. Cách sử dụng : before để thêm Font AwesomeCũng làm tựa như như khi thêm after. Tuy nhiên, thay vì thêm vào sau thì giờ đây bạn sẽ thêm vào trước .Chúng tôi lấy ví dụ như đoạn HTML dưới đây :*Thêm vào như trong ảnh :*Kết quả sau khi triển khai ta được :*3. Một số chú ý quan tâm khi sử dụng : after và : before

– Các nội dung sẽ không thể bôi đen khi thêm bằng :after và :before.

Xem thêm: Cách tách nền xanh trong Photoshop bằng Plugin Primatte

– Thêm những thuộc tính CSS cách thông thường .– Có hai cách sử dụng người dùng hoàn toàn có thể thực thi. Một là sử dụng : before. Hai là sử dụng :: before. Tại sao lại có điều này ? Đó là chính bới, những trình duyệt thường thì sẽ tương hỗ 1 dấu hai chấm. Và cả 2 dấu hai chấm cho cú pháp của CSS3. Tuy nhiên, với những trình duyệt cũ như IE8 thì không có điều này. Vì thế, bạn hoàn toàn có thể dùng cả 2 cách viết trên nếu code không tới tận IE8 .Bạn đã rõ Font Awesome là gì cũng như sử dụng font awesome chuẩn nhất rồi phải không ? Hy vọng bài viết của chúng tôi hữu dụng cho những bạn. Nếu còn vướng mắc điều gì, hãy để lại comment phía dưới bài viết bạn nhé. Chúng tôi sẽ giải đáp. Chúc những bạn một ngày vui tươi .