This is the second day of my participation in Gwen Challenge

start

Two days ago, UI has not cut the icon, just as usual to iconfont to pick a nice icon temporarily instead. When I opened IconFont, I was immediately intrigued by the promotion for color ICONS on the front page, which was titled “A Color Icon Scheme That Works Better than SVG.” It reminded me of what I did with colored ICONS.

How to appear a color icon

I’m sure most of you are familiar with this as I am.

  1. Image (bitmap lossy)
  2. CSS Image Background (bitmap lossy)
  3. Unicode icon text (monochrome only)
  4. SVG

Just touch HTML white all know there is img tag, icon PNG/JPG… HTML supported image formats can be used as an icon when displayed on a web page.

<style>
.book-list{
  display: flex;
  flex-direction: column;
}
.book-list-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
<div class="book-list">
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="ICONS of books">The romance of The Three Kingdoms</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="ICONS of books">A dream of red mansions</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="ICONS of books">Journey to the west</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="ICONS of books">Water margin</div>
  </div>
Copy the code

After touching CSS we know that we can use the way of background image to achieve, background + pseudo-class, as long as we use the defined class name, we can reuse this icon, this is still my first choice when it is convenient.

.book-list-item::before{
  content: ' ';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(./book.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
Copy the code

However, the PNG format used above is a bitmap, not a vector image, which means it can not be lossless magnification. The simple icon is just a supplementary illustration, which is ok, but currently in order to adapt to different resolutions, you have to choose a larger image size, which can be changed to suit different scenes. Still, the jagged feel and increasing size that comes with using this method will only make you feel bad

Fortunately the font we used on the computer was vector, but the text was also a meaning icon. You can even use literal symbols to show your mood ブ ブ, and you can define your own font format. Iconfont is a vector site that turns your icon into a font file for you to use. Add the book icon to the project -> download it locally and you can get some font files.

You’ll get a lot of font formats that are standard from different vendors or organizations. Unfortunately it doesn’t work in all browsers, so in order to be compatible with most formats, define a font like iconfont. CSS.

@font-face {
  font-family: "iconfont"; /* Project id 2624042 */
  src: url('iconfont.eot? t=1624277829622'); /* IE9 */
  src: url('iconfont.eot? t=1624277829622#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('iconfont.woff2? t=1624277829622') format('woff2'),
      url('iconfont.woff? t=1624277829622') format('woff'),
      url('iconfont.ttf? t=1624277829622') format('truetype'),
      url('iconfont.svg? t=1624277829622#iconfont') format('svg'); } // Change the background image to use the font.book-list-item::before {
    font-family: iconfont;
    content: '\e653';
    display: inline-block;
 }
Copy the code

The problem with font files is that they are displayed in black and white. You can change the color just as you would change the text. Color :#f00, but it’s monochrome.

Among the many unzipped files, you’ll find an SVG file. As a browser goes out the window, the use of the form SVG-icon is slowly becoming the mainstream and recommended approach. He solved all the above problems

  • Support for multi-color ICONS, no longer limited by monochrome.
  • Support for font-size and color adjustments like fonts.
  • Support ie 9 +
  • Animations can be implemented using CSS.
  • Reduce HTTP requests.
  • Vector, zoom without distortion
  • You can finely control every part of an SVG icon

With SVG you can use it directly in a browser, but it is as inelegant as using a single image. For ease of use, include each icon in the symbol element to use, and use the symbol with the use element. Here is a recommended article that uses Webpack to pack multiple SVG ICONS into SVG Sprites to simplify the use of SVG. This article will not describe the use of SVG by hand, but will show you the elegant use of icon

The use of colored ICONS in iconfont

In fact, color icon has long appeared, now OpenType specification color font technology has become more mature, iconFONT began to introduce color icon to become the world’s first support color font icon production management platform. Currently, there are several main formats that support color fonts, which are part of the OpenType specification:

Company/Organization Font format (table name) vector The bitmap The gradient The system supports
W3C SVG ✅ ✅ ✅ MacOS 10.14+, iOS 12+,Windows 10 Anniversary Update
Microsoft COLR ✅ ❌ ❌ MacOS 10.13+, iOS 11+, Windows 8.1+
Apple SBIX ❌ ✅ ✅ macOS and iOS
Google CBDT ❌ ✅ ✅ Android
Google&Microsoft COLRv1 ✅ ❌ ✅ Only the Chrome Canary
  • SVG: A vector font standard led by Adobe and Mozilla. Its full name is OpenType SVG (OT-SVG). It contains not only standard TrueType or CFF glyph information, but also optional SVG data, allowing you to define colors, gradients, and even animation effects for fonts. Color matching information from the SVG standard will also be stored in CPAL tables. Note: Apple’s implementation follows the W3C’s SVG Native specification, which is a subset of SVG 1.1.
  • COLR/CPAL(Version 0) : Vector font standard led by Microsoft. Support for COLR, which records layer data, and CPAL, which records color matching information, is integrated into Windows 8.1 and later (this version does not support gradience).
  • CBDT/CBLC: Bitmap font standard led by Google. CBDT records color bitmap data and CBLC records bitmap location data, which is actually the color version of EBDT/EBLC.
  • SBIX: Bitmap font standard led by Apple, the format used by Apple Emoji. SBIX is a standard bitmap image table that contains PNG, JPEG, or TIFF image information. Support for SBIX is integrated with macOS and iOS.
  • COLRv1 (Version 1) : A Google-promoted version based on COLR/CPAL tables that supports graditions, Affine transformations, and multiple blend modes. It is currently available in the OpenType 1.9 Alpha specification.

ICONS in Iconfont are vector, so there are only two formats to choose from, OT-SVG and COLR. Iconfont chose COLR for smaller files, faster performance, and better compatibility

Select the icon Settings item

Select a multicolor icon you like in Iconfont, add the project, and tick color in the project Settings

Use it like a Unicode reference

After setting up the project, use the same method as above using Unicode to reference the font file. It’s that simple.

Personal view

Iconfont introduced the use of color ICONS, giving vector multicolor ICONS a new alternative to SVG. The experience is completely seamless for ICONS that are used to Unicode fonts, giving a completely new experience. But SVG still appeals to me: the first is that you can use animations and the second is that SVG makes it easier to add ICONS after configuring svG-Sprite-Loader. Each approach has its own application scenarios, and as I mentioned above, CSS backgrounds + pseudo-classes are still a good choice in some scenarios.

Refer to the article

  • Hand to hand, with your elegant use of icon
  • Iconfont supports new color font ICONS