Vì sao giờ đa phần làm icon bằng css?

#1

Giờ mình thấy icon toàn làm bằng css , mình tưởng nó là image chứ , sao css có thể làm được icon vậy …

1 Like
#2

Css làm gì làm icon được. Một vài kĩ thuật:

  • font icon
  • image sprite
  • inline svg (css/html)

Bạn bỏ code mẫu lên mình giải thích cho

5 Likes
#3

Theo mình nghĩ là thông thường nta có các theme để hiển thị bố cục, kích thước,… Trong theme lại có khái niệm color cheme chính là màu sắc của các thành phần trong trang web của bạn. Giả sử có 2 color scheme có tông đỏ và tông xanh. Nếu có thể thay đổi các icon mà theo tông màu thì hay quá. Nếu các icon được cố định bởi HTML thì rất khó khăn trong việc thay đổi này. Còn nếu làm bằng css thì đơn giản hơn. Ví dụ bạn chỉ cần viết .schemeA i{background-image:màu a;} và .schemeB i{background-image:màu b;} lúc này thay đổi scheme màu sẽ có icon image phù hợp với tông màu của bạn

1 Like
#4

Cũng thắc mắc như vậy.Theo ý kiến chủ quan thì có phải là theo css thì lúc mà scale lại nó không bị bể hình không.Lúc dùng mấy cái icon của boostrap thấy zoom lớn cỡ nào cũng như vậy. Còn dùng image toàn bị bể hình

1 Like
#5

Do sử dụng hình ảnh bằng vector nên khi zoom không bị vỡ hạt như khi dùng ảnh bằng pixel đó bác :grin:

2 Likes
#6

CSS hoàn toàn có thể làm icon được nhé. Mình nhớ có khoảng 3 cách làm icon bằng CSS:
1- Sử dụng encode base 64 đối với các icon nhỏ: đây là cách nhúng trực tiếp ảnh vào CSS và hiển thị (cho tốc độ hiển thị rất nhanh)

2- Dùng CSS vẽ icon:


http://nicolasgallagher.com/pure-css-gui-icons/ (link này vẽ thuần icon bằng CSS nè)
http://cssdeck.com/labs/css3-monochrome-icon-set

3- Sử dụng SVG nhúng
background-image: <svg>...</svg>;

Ý của bạn có phải vậy k nhỉ? Cách 2 dùng thuần CSS vẽ icon luôn đó.

5 Likes
#7

Cái này dùng hình vector (svg) hoặc font vector. Giờ làm front-end nên tìm hiểu thêm về SVG và cách compile các ảnh SVG vào 1 file (làm sprite)

2 Likes
#8

chắc là cách thứ 3 vì mình dowload mã nguồn của mấy website kìa về thấy toàn css ko có cái ảnh nào , mà hình như dùng css để tạo icon thì web load nhanh hơn so với dùng icon bằng img thì phải…

#9

Sao không đưa code lên cho người ta xem mà hỏi xong rồi ngồi đó đoán già đoán non?

1 Like
#10

code nó chỉ có class=icon-x thì có gì phải đưa lên???

#11

Bạn đưa nguyên cái địa chỉ trang web lên đây để người ta vào đó xem source và lần mò giúp bạn. Chứ ai bảo bạn trích có mỗi đoạn class gì đó rồi thì thánh mà đoán ra? Nếu web đó không có địa chỉ thì lý do gì bạn xem được nó? Save nó lại và zip lại rồi quẳng lên cũng được. Còn nếu bạn nhớ lơ mơ là có web như vậy giờ không biết nó là web nào thì đợi… hồi sau sẽ rõ.

2 Likes
#12

Họ dùng font icon đó
https://fortawesome.github.io/Font-Awesome/examples/

Thực ra thì svg cũng có thể khai báo như vậy ^^, tuy nhiên làm font thì svg họ hay nhúng hơn, kiểu như này

<svg viewBox="0 0 20 20" class="svg-icon">
   <path d="M5.114,5.726c0.169,0.168,0.442,0.168,0.611,0c0.168-0.169,0.168-0.442,0-0.61L3.893,3.282c-0.168-0.168-0.442-0.168-0.61,0c-0.169,0.169-0.169,0.442,0,0.611L5.114,5.726z M3.955,10c0-0.239-0.193-0.432-0.432-0.432H0.932C0.693,9.568,0.5,9.761,0.5,10s0.193,0.432,0.432,0.432h2.591C3.761,10.432,3.955,10.239,3.955,10 M10,3.955c0.238,0,0.432-0.193,0.432-0.432v-2.59C10.432,0.693,10.238,0.5,10,0.5S9.568,0.693,9.568,0.932v2.59C9.568,3.762,9.762,3.955,10,3.955 M14.886,5.726l1.832-1.833c0.169-0.168,0.169-0.442,0-0.611c-0.169-0.168-0.442-0.168-0.61,0l-1.833,1.833c-0.169,0.168-0.169,0.441,0,0.61C14.443,5.894,14.717,5.894,14.886,5.726 M5.114,14.274l-1.832,1.833c-0.169,0.168-0.169,0.441,0,0.61c0.168,0.169,0.442,0.169,0.61,0l1.833-1.832c0.168-0.169,0.168-0.442,0-0.611C5.557,14.106,5.283,14.106,5.114,14.274 M19.068,9.568h-2.591c-0.238,0-0.433,0.193-0.433,0.432s0.194,0.432,0.433,0.432h2.591c0.238,0,0.432-0.193,0.432-0.432S19.307,9.568,19.068,9.568 M14.886,14.274c-0.169-0.168-0.442-0.168-0.611,0c-0.169,0.169-0.169,0.442,0,0.611l1.833,1.832c0.168,0.169,0.441,0.169,0.61,0s0.169-0.442,0-0.61L14.886,14.274z M10,4.818c-2.861,0-5.182,2.32-5.182,5.182c0,2.862,2.321,5.182,5.182,5.182s5.182-2.319,5.182-5.182C15.182,7.139,12.861,4.818,10,4.818M10,14.318c-2.385,0-4.318-1.934-4.318-4.318c0-2.385,1.933-4.318,4.318-4.318c2.386,0,4.318,1.933,4.318,4.318C14.318,12.385,12.386,14.318,10,14.318 M10,16.045c-0.238,0-0.432,0.193-0.432,0.433v2.591c0,0.238,0.194,0.432,0.432,0.432s0.432-0.193,0.432-0.432v-2.591C10.432,16.238,10.238,16.045,10,16.045" fill="none"/>
</svg>
3 Likes
#13

oke mình hiểu rồi…:)) thanks

#14

Ngoài ra, bạn hoàn toàn có thể sử dụng các icon mặc định trong các font thông thường như Arial, Time New Roman, … (là các raster UTF8 font nhưng vẫn support icon). Styling nó y như styling text vậy.

Link dưới hướng dẫn cách bạn làm một icon font (cũng styling như text luôn)


Gọi icon ra data-icon="&#x67;"

1 Like
#15

Thêm cho bạn 1 link nữa khi cần các icon đơn giản (dùng icon ngay trong raster font)
http://www.w3schools.com/charsets/ref_utf_symbols.asp
https://dev.w3.org/html5/html-author/charref
http://www.webdesignerwall.com/demo/html-entities/

1 Like
#16

Mình thường dùng css font để làm icon, chủ yếu là vì… lười vẽ hình.

2 Likes
#17

Tuy nhiên, mình khuyên là không nên dùng font icon (kiểu như Bootstrap) vì một số trình duyệt hiển thị không tốt lắm. Nên chuyển sang dùng svg.


Google hỗ trợ cả web font icon lẫn svg lib đó. Từng này icon mình nghĩ khá đủ cho việc làm một webapp rồi ^^

Dùng svg hay ở chỗ, ngoài việc styling màu sắc như đỏ, đen, xanh, bạn còn có thể làm animation cực dễ (điều mà font icon không làm được)
http://tympanus.net/Development/AnimatedSVGIcons/

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?