Trong một layout website thường sẽ sở hữu những ICON góp website đẹp nhất vàthân thiện hơn, và trong khi các ICON này còn có tính năng điều hướng người dùng.
Bạn đang xem: Sử dụng font awesome trong photoshop
Trước phía trên để tạo các ICON đó ta phải triển khai cắt chúng ra từ tệp tin PSD và cần sử dụng CSS để gán background hoặc sử dụng thẻ img để lấy ICON đó vào. Tuy nhiên hiện nay chúng ta sẽ có giải pháp khác đó là áp dụng Symboy Font (font chữ kiểuký hiệu).Hiện naycó những thư viện Symboy phông nhưng mạnh mẽ nhất và thường được sử dụng nhất là
CSS3 như vào ví dụ tôi đã demo sống trên.
Font Awesome chuyển động hầu không còn ở các trình duyệt tiến bộ hiện hay.Tuy nhiên cùng với cácphiên phiên bản cũ
IE7 thì nó không hỗ trợ nữa vì IE7 được coi như đang chết.
Nếu bạn sử dụng Bootstrap để xây đắp CSS mang đến website thì sẽ thuận tiện nhận thấy sự cần thiết của fonts Awesome vì vìchúngkết hợp với nhau hơi là giỏi và tạo nên các sản phẩm khá là bắt mắt.
Bài viết này được đăng trên
2. Điểm mạnh của Font Awesome
Nếu ta áp dụng hình ảnh thì tốc độ load của trang web sẽ chậm rì rì hơn chính vì ta cần load môt hình hình ảnh khá là nặng trĩu nề. Tuy nhiên với Font Awesome thì ban chỉ cần load một file CSS, mộtfile Font còn chỉ load một lần nhất nên vận tốc sẽ được cải thiện đáng kể.
Một hình ảnh không thể thay đổi màu, kích cỡ của chúng được. Riêng biệt với form size thì ta hoàn toàn có thể sử dụng CSS để tùy chỉnh cấu hình chiều rộng, chiều cao,nhưng trường hợp làmnhư vậy thìchất lượng hình ảnhsẽ bị hình ảnh hưởng. Nhưngvới phông Awesome thì các bạn dễ dàng biến hóa kích thước cùng màu của iconbằng đông đảo thuộc tính CSS thường thì của phông chữ như color, font-sizehay bất cứ một trực thuộc tính CSS như thế nào khác giành cho Font chữ.
Font Awesome sử dụng linh hoạt giúp lập trình viên không mất quá nhiều thời gian để mang các icons từ tệp tin PSD.
Và còn nhiều ưu điểm nữa tuy nhiên mình dành cho bạn tự đi khám phá.
3. Cách sử dụng Font Awesome
Để bạn dễ hiểu thì mình sẽ thực hiện quá trình như sau:
Bước 1: tải về Font Awesome với nhúng vào Layout
Để áp dụng được phông Awesome thì ban phải download thư viện của nó về hoặc sử dụng liên kết CDN nhưng nó cung ứng cho chúng ta.
Nếu các bạn sử dụng liên kết CDN thì chỉ câu hỏi nhúng băng thông CSS sau:
Nếu bạn tải về về thì sẽ được một folder gồm các file như vào hình sau:
Trong đó bạn chỉ quan tâm đến file font-awesome.min.css. Tức thị để sử dụng thì các bạn chỉ việc thực hiện file CSS font-awesome.min.css.
Xem thêm: Cách Đọc Trộm Tin Nhắn Không Cần Mật Khẩu, Cách Xem Tin Nhắn Facebook Của Người Khác
Bước 2: xem thêm các class chế tác ICON bao gồm sẵn của fonts Awesome
Bạn vào link này nhằm xem những icons và các class làm cho chúng nhé.
Bước 3: áp dụng Font Awesome
Để tạo thành icon thì bạn nên áp dụng thẻ i và bổ sung class của icon.
Kỹ thuật lỗi thời để tạo nên các hình tượng được sử dụng để cắt xén hình ảnh theo cách bằng tay thủ công để làm cho biểu tượng.Điều này rất là tốn thời gian. Hiện giờ các biểu tượng Google font Awesome xử lý vấn đề này.
Trong trả lời này, bạn sẽ tìm hiểu cách đặt biểu tượng Phông chữ hoàn hảo và tuyệt vời nhất trong tư liệu web Photoshop của mình bằng phương pháp nhập tên của biểu tượng.
Với mục đích của lí giải này, cửa hàng chúng tôi sẽ thao tác làm việc với fonts Awesome Free. Công ty chúng tôi sẽ thực hiện nó với Photoshop CC 2018 được cài để lên Windows 10.
Bạn cũng rất có thể áp dụng các hướng dẫn này cho phiên bản trả tiền của biểu tượng Google phông Awesome. Cả nhị bộ biểu tượng Miễn phí tổn và Trả tầm giá cũng rất có thể được cài để trên Mac.
Bước 1. Thiết lập xuống các hình tượng miễn phí tuyệt đối hoàn hảo về phông chữ
Chuyển mang lại thư mục tệp fontawgie-free-xyz . Bạn sẽ thấy một thư mục fontawgie-free-xyz khác . Mở nó ra.Bạn vẫn thấy một vài ba thư mục với tập tin. Search thư mục sử dụng trên máy vi tính để bàn :07 tò mò các hình tượng thường xuyên và chữ tín vững chắc527×621 37.2 KB
Bạn sẽ thấy cửa sổ bật lên Trình đơn ngữ cảnh. Nhấp vào Cài đặt:
09 tập tin font chữ hoàn hảo nhất nhìn thấy trong trình làm chủ phông chữ867×428 51.9 KB
Khởi chạy Photoshop của bạn. Mở danh sách các phông chữ có sẵn đến bạn. Bây giờ bạn sẽ thấy những phông chữ phông chữ hoàn hảo được liệt kê, với 1 mục nhập fonts chữ tuyệt đối hoàn hảo miễn phí cho cả loại font chữ miễn phí liên tục và miễn phí:
10 fonts chữ hoàn hảo có sẵn trên photoshop của bạn759×514 62.3 KB
Bước 2. Tra cứu một Tên hình tượng Tuyệt vời
Các biểu tượng Tuyệt vời fonts chữ đã chuẩn bị với Photoshop của người tiêu dùng dưới dạng những loại fonts chữ. Trước khi bạn có thể sử dụng một hình tượng trong tư liệu Photoshop bắt đầu hoặc hiện tại của bạn, bạn phải tìm thương hiệu biểu tượng.
Tìm thương hiệu biểu tượng kề bên biểu tượng bạn muốn sử dụng. Với mục tiêu của hướng dẫn này, tôi đã chọn lựa thêm vào tài liệu hình ảnh Photoshop của bản thân mình “thẻ địa chỉ”:Nhập thẻ địa chỉ phía bên trong hình chữ nhật:Có bạn có nó. Với hình tượng Google font Awesome đã lựa chọn theo ý của bạn, giờ đây bạn cũng có thể tiếp tục chế tạo phần sót lại của tư liệu hình hình ảnh Photoshop của bản thân theo ý muốn.
How to Use phông Awesome in Photoshop Designs
In this tutorial, you will learn how to lớn place a phông Awesome icon in your Photoshop website document by simply typing in the icon"s name.