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

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

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

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

zoom lớn cỡ nào cũng như vậy

image toàn bị bể hình

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

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)

Data URIs | CSS-Tricks

Did you know that you don't have to link to an external image file when using an element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. The end result can be a site with...

2- Dùng CSS vẽ icon:

Code Envato Tuts+

How to Create a Beautiful Icon with CSS3

Today, I'd like to show you a neat trick. We'll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. The Game Plan Create a square box Round...

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 đó.

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)

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…

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?

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

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õ.

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>

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

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.

Geometric Shapes

Geometric Shapes is a Unicode block of 96 symbols at code point range U+25A0-25FF. Font sets like Code2000 and the DejaVu family—include coverage for each of the glyphs in the Geometric Shapes range, Unifont also contains all the glyphs. Among the fonts in widespread use, full implementation is provided by Segoe UI Symbol and significant partial implementation of this range is provided by Arial Unicode MS and Lucida Sans Unicode, which include coverage for 83% (80 out of 96) and 82% (79 out of ...

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

Webdesigner Depot – 10 Apr 13

How to turn your icons into a web font | Webdesigner Depot

I had created some neat icons for a website redesign I was doing, and I previewed the new site on an old iPad. The layout looked OK at normal size, but zooming in to part of the page, I suddenly saw that my icon was a blurry mess, while the...

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/

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

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.

Material Design

Icons - Material Design

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.

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/