字体图标

字体图标

一

. 1.声明字体，告诉浏览器使用的是什么字体图标
在标签对里拷贝字体图标的内容–口--
@font-face{
@font-face {
font-family: ‘lixiaoting’;
src: url(‘fonts/icomoon.eot?v1i6pt’);
src: url(‘fonts/icomoon.eot?v1i6pt#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?v1i6pt’) format(‘truetype’),
url(‘fonts/icomoon.woff?v1i6pt’) format(‘woff’),
url(‘fonts/icomoon.svg?v1i6pt#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
}
2.给元素使用字体图标，引用上面的声明的font-family，设置字体其他样式
eg:
i{
font-family: “lixiaoting”;
font-style: normal;
font-size: 24px;
color:red;
font-weight: bolder;
}
**

第2种

                            设置字体是声明的字体图标
                            给元素添加伪元素选择器，content属性和字体图标的Unicode编码
                           eg: content:"\e911";
                                div:before{
                                    font-family:"lixiaoting";
                                    content:"\e911";
                                    font-size:80px;
                                    color:#f60;
                                    font-weight:900;
                                    }

                            */
    @font-face {
		  font-family: 'lixiaoting';
		  src:  url('fonts/icomoon.eot?v1i6pt');
		  src:  url('fonts/icomoon.eot?v1i6pt#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.ttf?v1i6pt') format('truetype'),
		    url('fonts/icomoon.woff?v1i6pt') format('woff'),
		    url('fonts/icomoon.svg?v1i6pt#icomoon') format('svg');
		  font-weight: normal;
		  font-style: normal;
	}
    span{
        font-family:'lixiaoting';
        font-size:60px;
    }