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',5b8b4f53,sans-serif;}
.jt {position:relative }
.jt em,
.jt i {
position: absolute; top: 0; left: 0; 0; height: 0; border- 3px 3px 0;
border-color: rgba(255,255,255,0); border-color: transparent ; *border-color: transparent; _border-color:tomato; _filter: chroma(color=tomato);
border-style: solid;
overflow: hidden; *zoom: 1;
}
.jt em {border- 10px 10px 0 10px;left:0px;top:1px;border-top-color:#808080;}
.jt i {border- 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 ; *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">󰄑</i>
<i class="iconfont">󰆕</i>
</body>
</html>
http://iconfont.cn，可以在线生成需要的字体文件格式，但是发现有的图标在safari下无法正常读取
http://icomoon.io/#home,比较好用。
如果你在本地环境下用狐火打开你的测试页面，自定义字体可能会无效,你可以试试解决方法：
1.把ceshi.html文件放在根目录下
2.在服务器环境打开ceshi.html