网页中画icon小图标

网页画icon小图标的三个方法。

一、利用spring图

     这是一个利用css中的图片的属性。

    background-image:url();

    background-position:x y;

二、利用font+html

    这是运用自定义font字体引用和特殊字符16进制的转换。

   font：先把下载好的font文件夹引用到文件夹里。

             下面的src中的url是你文件中font文件的路径。

       eg：

      @font-face{

         font-family:"icon";

        src:src:url("fonts/icomoon.eot"); // IE9
        src:url("fonts/icomoon.eot?#iefix")format("embedded-opentype"), //IE6-IE8
               url("fonts/icomoon.woff")format("woff"),//Modern Browsers
               url("fonts/icomoon.ttf")format("truetype"),//Safari, Android, iOS
               url("fonts/icomoon.svg")format("svg") //Legacy iOS

      }

      需要应用的类名称{

        font-family:(上面自定义font的名称)；

  HTML：在HTML中加上相对应的icon16进制字符。注意需要在16进制字符前加上&#x。eg：<i class="i-con">&#xe900;</i>

三、利用font+css

   这个与font+HTML大致相同，也要引入@font-face定义。

  不同的地方在于HTML部分变成为css。

  css部分引用了HTML5中的伪元素before。

  此处得注意在16进制前面加上“\”。

   eg：


  <i class="icon icon_code"></li>    

       icon_code：before{

             content：“\e900";

     }