Tăng kích thước icon css

Nội dung chính Show

• 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

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:

 class="icon-ok-sign" style="color:green">

 class="icon-warning-sign" style="color:red">

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:

 class="fa fa-check-circle-o fa-5x text-success" >

Nếu không thì:

 class="fa fa-check-circle-o fa-5x" style="color:green">

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.

 style="font-size: 44px;">
    class="icon-umbrella icon-large text-error">

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:

     class="icon-book icon-white"> Book
     class="icon-ok-sign icon-silver"> 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.

 src="https://use.fontawesome.com/49b98aaeb5.js">

 class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a">
 class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a">
 class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a">
 class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a">
 class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a">

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 ithẻ.

10 hữu ích 0 bình luận chia sẻ

answer

8

http://fortawgie.github.io/Font-Awgie/examples/

 class="icon-thumbs-up icon-3x main-color">

Ở đâ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

  class="fa fa-ban text-danger">

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ư

 class="fa fa-plus fa-lg green"> 

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 http://www.w3schools.com/icons/fontawclaw_icons_intro.asp

 class="fa fa-car">
 class="fa fa-car" style="font-size:48px;">
 class="fa fa-car" style="font-size:60px;color:red;">

 class="fa fa-car fa-lg">
 class="fa fa-car fa-2x">
 class="fa fa-car fa-3x">
 class="fa fa-car fa-4x">
 class="fa fa-car fa-5x">

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

 class="fa fa-facebook"> 

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:

 class="icon-bookmark icon-white">

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

 class="text-success"> class="fa fa-check">

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:

 class="nws">
 href="#NewsModal" class="urgent" title="' + title + '" onclick=""> class="label label-icon label-danger"> class="fa fa-bolt">' 

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:

 class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true">
 class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true">
 class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true">

Ở đâ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ẻ