您的位置：首页 > 其它

记录一些创建图标的方法

2014-03-07 10:54 267 查看

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">󰄑</i>
<i class="iconfont">󰆕</i>
</body>
</html>

http://iconfont.cn，可以在线生成需要的字体文件格式，但是发现有的图标在safari下无法正常读取 http://icomoon.io/#home,比较好用。
如果你在本地环境下用狐火打开你的测试页面，自定义字体可能会无效,你可以试试解决方法：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航