For those of you who follow Iconfont, we recently made a major upgrade to iconfont+, which now supports color ICONS, which means we can use new ICONS with more features and images. We’ve also published a tutorial on iconfont, a text-based approach to ICONS and special characters on the web. Click here for a closer look at the new features.
Symbol: This is a completely new way of using it. It is the mainstream of the future and is currently recommended by the platform. This usage is actually a collection of SVG and has the following characteristics compared to the other two: support for multi-color ICONS, no longer monochromatic restrictions. With a few tricks, it is possible to adjust styles like fonts by font size and color. Poor compatibility, support for IE9 +, and modern browsers. Browsers render SVG with mediocre performance, not as good as PNG. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVGS) Scalable Vector Graphics (SVGS) Scalable Vector Graphics SVG features: 1. I can scale it up and down. (Users can zoom in and out of the image display without destroying sharpness, detail, etc.) 2. Text independence. Text in an SVG image is independent of the image and remains editable and searchable. There is no font limit, and the user’s system will see exactly the same screen as when they created it, even if a font is not installed. 3. Smaller files. (In general, SVG files are much smaller than those in GIF and JPEG formats, and therefore download quickly.) 4. Super display effect. (SVG images always have sharp edges on the screen, and their sharpness is suitable for any screen resolution and print resolution.) 5. Super color control. (SVG images offer a palette of 16 million colors, with support for ICC Color Description File standards, RGB, line X fill, gradients, and masks.) Because SVG’s formatting advantage is that it is based on XML Extensible Markup Language, an XML file, and BECAUSE SVG is designed for use on the Internet, accessing it through Javascript and DOM is the most important application pattern. HTML can be modified dynamically with Javascript and DOM, as can images created, modified, and deleted dynamically in a browser. So the advantages of using SVG in web pages over other image formats, such as JPEG and GIF, are: SVG images can be created and modified with a text editor SVG images can be searched, indexed, scripted or compressed SVG is scalable SVG images can be printed with high quality at any resolution SVG can be enlarged without degrading image quality and browsers support, Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG. Internet Explorer 8 or earlier supports SVG by installing the Adobe SVG Viewer. Iconfont’s official website describes that the performance of browser rendering SVG is not as good as PNG. After testing and making several small color ICONS, modern browsers render SVG is actually quite good. And iconfont platform also recommended this new way of use, now the Rapid development of Internet technology, I believe that this way of use will be the mainstream in the near future. Introduced so much, so let’s do a small case experience. First, go to the iconfont website and look for some colorful ICONS:
In addition to the new use of iconfont+, the traditional use of iconfont has also been optimized. For details, please refer to the demo file: Font class is a variant of Unicode, which is used to solve the problem of unintuitive unicode writing and ambiguous semantics. Compared to Unicode usage, it has the following features: good compatibility, support for IE8 +, and all modern browsers. It is more intuitive to write than Unicode. It’s easy to tell what the icon is. Because you use class to define ICONS, you only need to change the Unicode reference in the class to replace the icon. Multicolor ICONS are not supported, however, because they are essentially fonts. (Note: For better rendering of the browser, it is recommended not to download multi-color ICONS if only monochrome ICONS are used.)
Step 1: Introduce the FontClass code generated under the project:
Step 1: Import the symbol code generated under the project:
(First of all, I need to import iconfont. Js file, which is equivalent to the invocation of the SVG graphics collection file.)
Step 3: Select the appropriate icon and get the class name, and apply it to the page: in practice, “iconfont” (font-family) needs to be changed to the font-family of your project. You can view it by editing the project. The default is “iconfont”. Use multicolor icon reference effects:
