Css - 字体图标

Css - 字体图标

字体格式

ttf、otf、woff、svg、eot

现在流行将图标做成矢量的字体格式的文档，很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清，这种字体图标在网页上显示却可以伸缩大小不影响清晰度、可改透明度、旋转、改变字体颜色、产生阴影、体积更小、支持所有浏览器。

字体图标下载

icomoon （德国）

icofont（中国）

以中国的阿里巴巴字体图标站为例，首先登陆该站点，选择我的项目

新建一个项目，保存。回到主页搜索需要的图标，选择喜欢的图标后点击添加到购物车

点击下图所示的购物车

打开界面，添加到项目里，保存。来到我的项目，下载项目。

解压本地压缩包，全部拷贝进你的前端项目中去，最好创建一个Font/IconFont目录存放压缩包里的各个文件，接着在页面引入字体图标样式

<link rel="stylesheet" href="Font/IconFont/iconfont.css" /><!--字体图标的样式-->

接下来拷贝上图所示的字体图标的unicode编码或Font Class，两种方式都可以。

把字体图标的unicode编码放入标签
<i class="iconfont"></i>
或把字体图标的class放进标签里
<i class="iconfont icon-guanbi" ></i>
无论如何，包含字体图标的标签都必须有iconfont的类名，i或span标签都可以

字体图标对齐文本

有些字体图标不能很好与文本对齐，可以利用相对定位来解决

.iconfont{
    font-size:20px;
    position:relative;
    top:2px;
}

Css - 学习总目录