记录一些创建图标的方法

1. 利用css创建箭头：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *        {padding:0px;margin:0px;font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;}
        .jt      {position:relative }
        .jt em,
        .jt i    { 
            position: absolute; top: 0; left: 0; width: 0; height: 0; border-width: 3px 3px 0;
            border-color: rgba(255,255,255,0); border-color: transparent\0; *border-color: transparent; _border-color:tomato; _filter: chroma(color=tomato);
            border-style: solid; 
            overflow: hidden; *zoom: 1;  
        }
        .jt em {border-width: 10px 10px 0 10px;left:0px;top:1px;border-top-color:#808080;}
        .jt i  {border-width: 10px 10px 0 10px;left:0px;top:0px;border-top-color:#fff}
    </style>
</head>
<body>
    <span class="jt">
        <em></em>
        <i></i>
    </span>
</body>
</html>

以上代码生成如下箭头：

备注：
期中ie8以下不支持rgba,所以有了兼容写法：

border-color: transparent\0; *border-color: transparent;

ie6不支持 transparent，但是ie滤镜支持将一种颜色设置为透明，添加兼容写法：

_border-color:tomato; _filter: chroma(color=tomato);


2.利用@font-face生成网页图标：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *        {padding:0px;margin:0px;font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;}

        @font-face {
          font-family:iconfont;
          src: url('acts_icon/iconfont.eot'); /* IE9*/
          src: url('acts_icon/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('acts_icon/iconfont.woff') format('woff'), /* chrome、firefox */
          url('acts_icon/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url('acts_icon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont{font-family:"iconfont";font-size:100px;font-style:normal;*zoom:1;
                  -webkit-font-smoothing: antialiased; 
                  -moz-osx-font-smoothing: grayscaleFont type;
                  -webkit-text-stroke-width: 0.2px;
                  }
    </style>
</head>
<body>
    <i class="iconfont">&#xf0111;</i>
    <i class="iconfont">&#xf0195;</i>
</body>
</html>


http://iconfont.cn，可以在线生成需要的字体文件格式，但是发现有的图标在safari下无法正常读取

http://icomoon.io/#home,比较好用。


如果你在本地环境下用狐火打开你的测试页面，自定义字体可能会无效,你可以试试解决方法：

1.把ceshi.html文件放在根目录下

2.在服务器环境打开ceshi.html

posted @ 2014-03-07 10:54  hdchangchang  阅读(175)  评论(0)  编辑  收藏  举报