记录一些创建图标的方法

1. 利用css创建箭头：

以上代码生成如下箭头：


备注：

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

border-color: transparent ; *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',5b8b4f53,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- 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
记录一些创建图标的方法

相关推荐
