Trong bài này, mình sẽ hướng dẫn sử dụng icon font awesome.
- Video Sử dụng icon Font awesome
- Hướng dẫn chi tiết
- Ưu điểm
- Cách dùng
font awesome
- Các thuộc tính đã hướng dẫn
Video Sử dụng icon Font awesome
Hướng dẫn chi tiết
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé
Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
Ưu điểm
+ Ưu điểm đầu tiên là Font Awesome có phiên bản free với tương đối đầy đủ các icon
+ Dễ dàng cài đặt
Cách dùng font awesome
+ Vào trang chủ font awesome
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO
Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
+ Tải về
+ Giải nén.
+ Cài đặt đường dẫn trong file CSS
+ Vào lại trang chủ để tìm icon cần dùng
+ Dùng bằng thẻ bất kỳ, giới thiệu thẻ mới
+ Tăng kích thước bằng font-size
Các thuộc tính đã hướng dẫn
+ float: left [right] dồn các khối
+ overflow: hidden
+ display: block
+ margin và padding
+ border : viền, 1px [độ dày]
black [màu] solid [loại nét]
+ text-align : canh lề
+ font-size : kích thước.
+ font-weight : bold độ đậm nhạt, giống như thẻ
+ font-family : kiểu chữ
+ font-style: italic : tạo chữ in nghiêng
+ float : left, dồn sang một bên
+ text-decoration: none, underline.
+ line-height: 20px: độ giãn dòng.
+ color: [màu chữ] dùng green, red hay mã màu
+ background-color: [màu nền]black
+
background-image: url[imgage source].
Code mẫu: download
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu thấy bài viết
thú vị.
Liên hệ
answer
423
Vì chúng chỉ đơn giản là phông chữ, nên bạn có thể định kiểu chúng thành phông chữ:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
423 hữu ích 3 bình luận chia sẻ
answer
134
Bạn cũng có thể chỉ cần thêm kiểu nội tuyến:
134 hữu ích 5 bình luận chia sẻ
answer
96
Nếu bạn đang sử dụng Bootstrap cùng một lúc, bạn có thể sử dụng:
Nếu không thì:
96 hữu ích 5 bình luận chia sẻ
answer
42
Có vẻ như màu biểu tượng FontAwgie phản ứng với thông tin văn bản, lỗi văn bản, v.v.
42 hữu ích 3 bình luận chia sẻ
answer
17
tập tin inyour.css:
*.icon-white {color: white}
*.icon-silver {color: silver}
tập tin inyour.html:
Book
OK
17 hữu ích 0 bình luận chia sẻ
answer
10
Có một cách thực sự đơn giản để thay đổi màu sắc của các biểu tượng Font Awesome.
Bạn có thể thay đổi mã hex
theo sở thích của bạn. GHI CHÚ: Màu văn bản cũng sẽ thay đổi màu biểu tượng trừ khi có một thẻ style="color:#00cc6a"
trong i
thẻ.
10 hữu ích
0 bình luận chia sẻ
answer
8
//fortawgie.github.io/Font-Awgie/examples/
Ở đây tôi đã định nghĩa một phong cách toàn cầu trong CSS của mình trong đó màu chính là một lớp, trong trường hợp của tôi, nó là một màu xanh nhạt. Tôi thấy rằng việc sử dụng các kiểu nội tuyến trên Biểu tượng với Phông chữ Tuyệt vời hoạt động tốt, đặc biệt trong trường hợp khi
bạn đặt tên cho màu sắc của mình theo ngữ nghĩa, nghĩa là màu nav nếu bạn muốn có một màu riêng cho điều đó, v.v.
Trong ví dụ này trên trang web của họ và cách tôi viết trong ví dụ của mình, phiên bản mới nhất của Font Awesome đã thay đổi cú pháp một chút về việc điều chỉnh kích thước. Trước đây, nó được sử dụng là:
icon-xxlarge
bây giờ tôi phải sử dụng ở đâu:
icon-3x
Tất nhiên, tất cả phụ thuộc vào phiên
bản Font Awesome bạn đã cài đặt trên môi trường của bạn. Hi vọng điêu nay co ich.
8 hữu ích 0 bình luận chia sẻ
answer
8
Sử dụng thêm FA 4.4.0
.text-danger
color: #d9534f
vào tài liệu css và sau đó sử dụng
thay đổi màu thành màu đỏ. Bạn có thể
thiết lập của riêng bạn cho bất kỳ màu nào.
8 hữu ích 0 bình luận chia sẻ
answer
7
Trong FontAwgie 4.0, các lớp thay đổi thành 'fa-2x', 'fa-3x'.
7 hữu ích 0 bình luận chia sẻ
answer
6
Đơn giản là bạn có thể định nghĩa một lớp trong tệp css của mình và xếp nó vào tệp html như
bây giờ viết vào css
.green{ color:green}
6 hữu ích 0 bình luận chia sẻ
answer
6
Đối với Kích thước: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.
Đối với màu:
Đối với bóng: .fa-linksin-vuông {text-Shadow: 3px 6px # 272634; }
``
6 hữu ích 0 bình luận chia sẻ
answer
5
Vui lòng tham khảo liên kết
//www.w3schools.com/icons/fontawclaw_icons_intro.asp
5 hữu ích
0 bình luận chia sẻ
answer
4
Tôi gặp vấn đề tương tự khi tôi cố gắng sử dụng các biểu tượng trực tiếp từ BootstrapCDN
[cách dễ nhất]. Sau đó, tôi đã tải xuống tệp CSS và sao chép nó vào thư mục CSS của trang web của tôi tệp CSS [Được mô tả theo 'cách dễ dàng' trong tài liệu tuyệt vời về phông chữ] và mọi thứ bắt đầu hoạt động như bình thường.
4 hữu ích 0 bình luận chia sẻ
answer
4
Chỉ nhắm mục tiêu tên lớp được xác định trước phông chữ tuyệt vời
trong ví dụ:
HTML
CSS
i.fa {
color: red;
font-size: 30px;
}
4 hữu ích 0 bình luận chia sẻ
answer
3
Tín dụng: Tôi có thể thay đổi màu của màu biểu tượng của
Font Awesome không?
[câu trả lời này dựa trên câu trả lời đó]
[ví dụ như biểu tượng dấu trang :]
tập tin inyour.css:
.icon-bookmark.icon-white {
color: white;
}
tập tin inyour.html:
3 hữu ích 0 bình luận chia sẻ
answer
2
Gói thẻ i trong p hoặc span, sau đó bạn có thể sử dụng lớp css bootstrap
2 hữu ích 0 bình luận chia sẻ
answer
2
Đối với phiên bản Font Awesome 5 SVG , hãy sử dụng
filter: drop-shadow[0 0 3px rgba[0,0,0,0.7]];
2 hữu ích 0 bình luận chia sẻ
answer
0
Tự động thay đổi các thuộc tính css của các biểu tượng .fa-xxx:
'
$[document].ready[function[]{
$['li.nws'].on["focusin", function[]{
$['.fa-bolt'].addClass['lightning'];
}];
}];
.lightning{ /*do something cool like shutter*/}
0 hữu ích 0 bình luận chia sẻ
answer
0
text-shadow: 1px 1px 3px rgba[0,0,0,0.5];
0 hữu ích 0 bình luận chia sẻ
answer
0
Như đã được chỉ ra, các biểu tượng tuyệt vời của phông chữ là văn bản, do đó bạn tạo kiểu cho nó bằng các thuộc tính CSS thích hợp. Ví dụ:
.fa-twitter-square {
font-size: 15px;
color: red;
}
Nếu, vì nó xảy ra khá nhiều với tôi, kích
thước biểu tượng hoàn toàn không thay đổi, hãy thêm "! Quan trọng" vào thuộc tính kích thước phông chữ.
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
0 hữu ích 0 bình luận chia sẻ
answer
0
Tôi sẽ không khuyên bạn sử dụng kiểu dáng phông chữ tuyệt vời như fa-5x, v.v. vì sợ họ có thể thay đổi nó và bạn sẽ phải tiếp tục sử dụng mã ứng dụng của mình để đáp
ứng với tiêu chuẩn mới nhất. Bạn chỉ cần tránh điều này bằng cách cung cấp cho mỗi lớp phông chữ tuyệt vời mà bạn muốn tạo kiểu đồng nhất cùng một lớp nói:
Ở đây lớp là fa-sabi-social-icon
Sau đó, trong css của bạn, bạn có thể tạo kiểu cho các phông chữ bằng cách sử dụng cùng các quy tắc css mà bạn sẽ tạo kiểu cho một phông chữ bình thường. ví dụ
.fa-sabi-social-icons {
color: //your color;
font-size: // your font-size in px, em or %;
text-shadow: 2px 2px #FF0000;
}
Điều đó sẽ giúp phông chữ của bạn - phông chữ tuyệt vời theo kiểu
0 hữu ích 0 bình luận chia sẻ