Phông chữ tuyệt vời 6: Đánh giá đầy đủ
- 1 Cách cài đặt phông chữ tuyệt vời
- Phương pháp 1.
- Phương pháp 2.
- 2 Cách sử dụng Phông chữ biểu tượng tuyệt vời
- 1 biểu tượng tiêu chuẩn
- 2 biểu tượng lớn
- 3 biểu tượng chiều rộng cố định
- 4 biểu tượng cho danh sách đạn
- 5 biểu tượng và trích dẫn đóng khung
- 6 biểu tượng hoạt hình
- 7 biểu tượng biến đổi
- 8 biểu tượng kết hợp
- 3 Font Awesome 4.5.0 collection, classes vàcss code to insert using the content property
- 4 tài nguyên liên quan
- Kích cỡ biểu tượng
- Màu biểu tượng
- Câu Hỏi Thường Gặp
Phông chữ tuyệt vời là một tập hợp các biểu tượng vector có thể mở rộng. Các biểu tượng có thể được định dạng bằng các thuộc tính CSS, đặt màu, kích thước, bóng của chúng và nhiều hơn nữa. Phông chữ phiên bản 5.5.0 bao gồm 605 biểu tượng.
1 Cách cài đặt phông chữ tuyệt vời
Phương pháp 1.
Sử dụng phiên bản FONT-WAGIEME.CSS của tệp bằng cách thêm mã sau vào<head> tiết diện:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Khi phông chữ được kết nối, bạn có thể sử dụng các biểu tượng trên trang web của mình.
Phương pháp 2.
Tải xuống phông chữ từ Font Awesome . Giải nén kho lưu trữ và tải lên hai thư mục từ kho lưu trữ lên máy chủ trang web - CSS và phông chữ. Nếu bạn đã có các thư mục có tên như vậy trên trang web của mình, thì bạn chỉ cần thêm các tệp từ các thư mục đã tải xuống cho họ.
Bạn có thể sử dụng phiên bản đầy đủ hoặc thu nhỏ của tệp:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Cách sử dụng Phông chữ biểu tượng tuyệt vời
Các biểu tượng có thể được thêm vào một trang web theo hai cách: bằng cách đặt các lớp thích hợp cho<i> và<span> elements, hoặcby adding them to the desired element using the :before, :after pseudo-elements vàthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: trước {nội dung: "\ f015";/ * thêm biểu tượng nhà1 biểu tượng tiêu chuẩn
Phông chữ tuyệt vời được thiết kế để được sử dụng với các yếu tố nội tuyến. Để thêm các biểu tượng, trước tiên bạn cần đặt lớp FA thành<i> hoặc<span> yếu tố.
Để thêm biểu tượng đã chọn trước hoặc sau phần tử, trống<i></i> hoặc<span></span> Phần tử được thêm vào phần tử, được gán một lớp biểu tượng, cũng như một lớp bổ sung mở rộng kiểu dáng.
<i class="fa fa-camera-retro"></i>2 biểu tượng lớn
Để tăng kích thước của một biểu tượng so với container của nó, hãy sử dụng FA-LG (tăng 33%), các lớp FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 biểu tượng chiều rộng cố định
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation hoặclists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Nhà</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Thư viện</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Các ứng dụng</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Cài đặt</a ></li></ul>4 biểu tượng cho danh sách đạn
Sử dụng các lớp FA-UL và FA-LI để thay thế các viên đạn mặc định trong một<ul>…</ul> Danh sách viên đạn.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Danh sách mục</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Danh sách mục</li> <li><i class="fa-li fa fa-square"></i>Danh sách mục</li></ul>5 biểu tượng và trích dẫn đóng khung
Use the fa-border class to set the border for the icon. The pull-right vàpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor SIT AMET, Lãnh đạo adipiscing elit. Donec Nec Purus Conue, Posuere Libero ở, Porta Sapien. Trong sed elit giảng bài. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Conue Sapien.</p>6 biểu tượng hoạt hình
Thêm các lớp FA-spin, FA-FLE, FA-REFRESH, FA-COG để thiết lập các biểu tượng quay. Hoạt hình không được hỗ trợ trong IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 biểu tượng biến đổi
Để xoay hoặc lật các biểu tượng, hãy sử dụng các lớp fa-rotate-* và fa-flip-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 biểu tượng kết hợp
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, vàfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes vàcss code to insert using the content property
Biểu tượng cho các ứng dụng web FA -điều chỉnh - \ f042;Fa -neo - \ f13d;
FA -Archive - \ F187;
FA -mARROWS - \ f047;
Fa -vasterisk - \ f069;
Faat - \ f1fa;
FA-BALANCE-TUYỆT VỜI-\ F24E;
Fa -Ban - \ f05e;
FA -Bank - \ f19c;
Fa -barcode - \ f02a;
Fa-pt-umpty-\ f244;
Fa-t-half-\ f242;
Fa-tứ giác-\ f243;
Fa-tứ giác-ba phần tư-\ f241;
Fa-p-terl-full-\ f240;
Fa -giường - \ f236;
FA -BEER - \ F0FC;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -Binoculars - \ F1E5;
Fa-birthday-cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bom - \ f1e2;
FA -Sách - \ f02d;
Để xoay hoặc lật các biểu tượng, hãy sử dụng các lớp fa-rotate-* và fa-flip-*.
4 tài nguyên liên quan
Ngoài bộ sưu tập Font Awesome, bạn cũng có thể sử dụng các phông chữ biểu tượng khác.
Fontello.Fontello có một bộ sưu tập lớn các phông chữ biểu tượng khác nhau. Bạn có thể chọn các biểu tượng bạn thích và tải chúng xuống máy tính của bạn.
Biểu tượng nền tảng.Biểu tượng Foundation là một bộ sưu tập phông chữ biểu tượng khác từ các nhà phát triển của Foundation Framework. Ngoài các biểu tượng tiêu chuẩn, trang web còn có các biểu tượng tròn, biểu tượng phương tiện truyền thông xã hội và hơn thế nữa.
Biểu tượng vật chất.Các biểu tượng vật chất là các biểu tượng phẳng thống nhất của Google thể hiện sự dễ nhận thức. Các biểu tượng được tối ưu hóa cho màn hình đẹp trên tất cả các nền tảng phổ biến và cho tất cả các độ phân giải màn hình.
Bộ sưu tập phông chữ biểu tượng chứa hơn 750 biểu tượng. Cách dễ nhất để cài đặt một bộ sưu tập trên trang web của bạn là sử dụng các biểu tượng như phông chữ Google Web. Để làm điều này, mã sau được bao gồm trong đánh dấu trang:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Để hiển thị chính xác phông chữ trong các trình duyệt, phần tử sẽ sử dụng phông chữ biểu tượng được cung cấp lớp học tài liệu:
.M vật liệu-iCons {font-family: 'biểu tượng vật chất'; FONT-WEIGHT: Kiểu phông chữ bình thường: Kích thước phông chữ bình thường: 24px; / * Kích thước biểu tượng ưa thích */ Display: Inline-Block; Chiều rộng: 1em; Chiều cao: 1em; Độ cao dòng: 1; Text-Transform: Không có; Khoảng cách chữ cái: bao nhiêu từ bình thường: bình thường; không gian trắng: Nowrap; Hướng: LTR; -Webkit-font-mmoothing: antialiased; / * Được hỗ trợ bởi tất cả các trình duyệt WebKit */ kết xuất văn bản: Tối ưu hóa; . /* Hỗ trợ Firefox. */ font-feater-setings: 'liga'; /* Tức là hỗ trợ. */}Chính các biểu tượng được thêm vào bằng cách sử dụng<I class=''material-Biểu tượng''>Mã Ligature hoặc HTML của biểu tượng</i> Tag, ví dụ:
<i class="material-Biểu tượng">tài khoản_balance_wallet</i><i class="material-Biểu tượng"></i>Ligature được hiểu bởi tất cả các trình duyệt hiện đại, tức là - bắt đầu từ phiên bản 10. Mã biểu tượng được tạo tự động, vì điều này bạn cần nhấp chuột trái vào hình ảnh biểu tượng và sao chép giao diện được đề xuất.
Kích cỡ biểu tượng
Kích cỡ biểu tượng is controlled by additional classes:
.Mer vật liệu-iCons.md-18 {font-size: 18px;} /* for<i class="material-Biểu tượng md-18"></i> */.Mer vật liệu-iCons.md-24 {font-size: 24px;} /* for<i class="material-Biểu tượng md-24"></i> */.Mder vật liệu-iCons.md-36 {font-size: 36px;} /* for<i class="material-Biểu tượng md-36"></i> */.Mder vật liệu-iCons.md-48 {font-size: 48px;} /* for<i class="material-Biểu tượng md-48"></i> */Màu biểu tượng
Màu sắc của các biểu tượng cũng được đặt bằng các lớp bổ sung:
.Mder vật liệu-iCons.md-Dark {Color: RGBA (0, 0, 0, 0.54);} /*<i class="material-Biểu tượng md-dark"></i> */.Mder vật liệu-iCons.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-Biểu tượng md-light"></i> */.Mder vật liệu-iCons.md-Dark.md-in hoạt động {color: rgba (0, 0, 0, 0.26);} /*<i class="material-Biểu tượng md-dark md-inactive"></i> * /.Merference-Biểu tượng.md-light.md-intive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-Biểu tượng md-light md-inactive">đối mặt</i> */Để đặt màu tùy chỉnh, bạn cần thêm một lớp xác định màu của biểu tượng, ví dụ:
.M vật liệu-iCons.indigo {color: #1A237E;} /*<i class="material-Biểu tượng indigo"></i> */Câu Hỏi Thường Gặp
- Phông chữ tuyệt vời trong các thuật ngữ đơn giản là gì?
- Về bản chất, nó là một phông chữ với các biểu tượng có thể được thêm vào bất kỳ yếu tố trang web nào để nâng cao khả năng hiển thị và thiết kế của nó. Bộ sưu tập bao gồm hàng trăm biểu tượng phù hợp cho bất kỳ nhiệm vụ và mục đích nào.Thêm thông tin về liên kết này
Michel Pinson là một người đam mê du lịch và người sáng tạo nội dung. Hợp nhất niềm đam mê giáo dục và khám phá, anh ấy đã chia sẻ kiến thức và truyền cảm hứng cho người khác thông qua nội dung giáo dục quyến rũ. Đưa thế giới gần nhau hơn bằng cách trao quyền cho các cá nhân có chuyên môn toàn cầu và ý thức về giang hồ.
