Danh sách Fonts Icon và awesome CSS V4.0.3 Giá trị nội dung muốn chia sẻ một chút sau một thời gian dài không chạm vào thế giới của blog và cập nhật blog này. Trong bài viết này cho những người thích chơi xung quanh với các blog thiết kế lựa chọn đúng đắn để thêm nữ trang trên một số yếu tố đến chi tiết đó bằng cách sử dụng Font Awesome bổ sung và tăng cường các blog. Font chữ tuyệt vời phiên bản 4.0.3 là bản cập nhật của phiên bản trước, và có 11 biểu tượng mới trên Font Awesome V4.0.3 và cũng có biểu tượng tên đổi. Tuyệt vời Fonts là một phông chữ web tuyệt vời và các biểu tượng chứa tất cả các khuôn khổ Twitter Bootstrap, và bây giờ nhiều hơn các biểu tượng khác chỉ bằng cách thêm một styleshet mẫu thì bạn có thể sử dụng biểu tượng 369.
Để sử dụng Font Awesome, sau đó bạn cần phải thêm styleshet dưới đây sau đó lưu trữ chúng trong đoạn mã trên : </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Làm thế nào để sử dụng HTML bên trong bạn chỉ cần thêm <i> sau đó lớp của tên của biểu tượng đã chọn. Ví dụ về cách viết nó như thế này:
fa-html5
<i class="fa fa-html5"></i> fa-html5
Để tăng kích thước, sau đó bạn chỉ cần thêm một lớp fa-lg, fa-1x, -2x fa, fa-3x, 4x-fa, fa-5x và các ví dụ sau:
fa-html5
fa-html5
fa-html5
fa-html5
fa-html5
<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>
Sử dụng lớp fa fa-ul-li và tạo thuận lợi trong việc đưa ra danh sách và chỉ định tên của biểu tượng.
- fa-check-square
- fa-check-square
- fa-spinner fa-spin
- fa-square
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
<li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>fa-spinner fa-spin</li>
<li><i class="fa-li fa fa-square"></i>fa-square</li>
</ul>
Sử dụng kéo lớp kéo sang phải hoặc trái để làm cho các biểu tượng nằm phía bên phải hoặc bên trái, trong khi fa biên giới là tạo ra một biên giới vào biểu tượng.
Đây là một ví dụ về biểu tượng đó nằm bên trái, để được ở bên phải sau đó thay thế kéo kéo trái-phải.
<i class="fa fa-info-circle fa-2x pull-left fa-border"></i>
Đây là một ví dụ về biểu tượng đó nằm bên trái, để được ở bên phải sau đó thay thế kéo kéo trái-phải.
Sử dụng lớp fa-quay để tạo ra một biểu tượng để được quay. Điều này thường được kết hợp vào biểu tượng fa-spinner, fa-làm mới, và fa-răng để xoay đúng cách. Nhưng tiếc là nó không hỗ trợ hình ảnh động CSS3 trong IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Để xoay hoặc lật các biểu tượng, sử dụng lớp-fa và fa-rotate- * lật *. Thay thế dấu hoa thị (*) với giá trị là bao nhiêu độ biểu tượng sẽ xoay.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
Trên đây là cách thức mà viết chữ tuyệt vời trong một đoạn mã HTML, có rất nhiều lời khuyên và thủ thuật khác có thể được sử dụng trong Font Awesome. Để biết thêm chi tiết có thể thử và tạo của riêng mình để hiểu rõ hơn về chơi xung quanh với các thành phần khác nhau của Bootstrap. Ngay cả trong những cách khác bạn cũng có thể thêm một biểu tượng Awesome Fonts trong các yếu tố giả CSS: trước khi viết ra hàm lượng giá trị của biểu tượng. Chương trình sau đây sử dụng chữ tuyệt vời trên CSS pseudo-yếu tố:
.element{
position: relative;
}
/* ganti tulisan berwarna merah pada value content */
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--custom pada CSS--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}Một khi bạn biết làm thế nào để sử dụng Font Awesome tốt CSS và HTML thì sau đây là danh sách các biểu tượng Font Awesome phiên bản 4.0.3 với nội dung giá trị CSS.
List danh sách biểu tượng. các bạn xem tại đây