Icons using fontIcon in html

I heard that fontIcon displays higher graphics than img. It is then rendered in a vector-like form, zooming in without distortion. In today's development, it was discovered that someone in the company used this technology. . So I took the time to learn. .

I finished it after reading a few articles during my study. . Also recommended here:

1 http://www.chinaui.com/Knowledge/20120907/14021209040007.shtml (there are demos, and more important online tools for graphic conversion: iconmoon )

2 http://iconfont.cn/Ali Graphics Library, which provides many graphic sources, you can download SVG files to iconmoon for conversion through this place.

3 http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/ (icommon usage tutorial)

html reference code snippet

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
  <!--Introduce font icon icon through style-->
  <link rel="stylesheet" href="font/iconfont.css"></link>

  <style type="text/css">
    ul li{
    	cursor: pointer;
    	list-style-type: none;
    	line-height: 30px;
    }
  </style>

  
  <style>
    @font-face {
		font-family: 'icomoon';
		src:    url('fonts/icomoon.eot?b7b2qy');
		src:    url('fonts/icomoon.eot?b7b2qy#iefix') format('embedded-opentype'),
			url('fonts/icomoon.ttf?b7b2qy') format('truetype'),
			url('fonts/icomoon.woff?b7b2qy') format('woff'),
			url('fonts/icomoon.svg?b7b2qy#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	}

    
    /*The icon is rendered by style and content such as: <i class="iconfont"></i> */
	[class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	 /* Render the icon via style <i class="icon-im"></i> */
	.icon-im:before {
		content: "\e900";
	}

 
  </style>
 </head>
 <body>
     <ul>
	    

       <li>
	     <!--Render the icon by adding content to the style-->
		 <i class="iconfont"></i>
		</li>

       <li>
	     <!--Render icon via style-->
		 <i class="icon-im"></i>
	   </li>
	   <li>天猫</li>
       <li>JD.</li>
       <li> 3g  </li>
       <li> 4g  </li>
       
       <li>
         <input type="radio" name="t">速率
         <input type="radio" name="t">时延
       </li>
       <li>Map</li>
     </ul>
 </body>
 
</html>

difficulty:

1 How to get vector graphics in SVG format

2 How to bind the SVG icon to the address such as: \e900 How to get it?

3 The choice of conversion editing tools, there are many online, and the installation file is very large. choice is a hassle

Specific steps:

1 Go to http://iconfont.cn/ to find an icon and download it in SVG format.

2 Learn how to use it with icommon tutorial

3 Use the icommon online tool to convert your SVG into the required format, and finally download the converted package

4 Refer to the demo reference icon in the reference. .

Specific implementation code: http://download.csdn.net/detail/tarenahuangdw/9436695

Icons using fontIcon in html

Guess you like