字体图标
第一步:定义字体图标,并导入字体文件
先把字体文件拷贝到项目文件夹,并在样式代码中添加以下代码
@font-face{
font-family: "icon";
src:url('../images/iconfont.eot');
src:url('../images/iconfont.eot?#iefix') format('embedded-opentype'),
url('../images/iconfont.svg#icomoon') format('svg'),
url('../images/iconfont.woff') format('woff'),
url('../images/iconfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
其中.eot、.svg .woff .ttf 是多字体文件,为了给各种浏览器兼容,使用时修改路径即可。
第二步:写字体的样式
.iconfont{font-family: "icon";} icon 为第一步的自定义的名称
这个就是和谐平常的样式一样,font-size
,color
,还有其他属性的等,按需写好。
第三步:使用
有三可以使用到字体图标的方法
第一种通过字体编码方式
<span class="iconfont"></span>
在需要显示字体图片的元素上加上iconfont
类名和写好字体编码即可。
第二种:用伪类选择器在样式中实现,此时只用编码只用写 ·/+后四位即可
.saoyisao::before{
content:"\e631" ;
}
<span class="iconfont saoyisao"></span> //通过给一个类名,让其生成一个伪类元素的方式使用字体图标
第三种直接调用别人写好的样式,写入对应的类名就可以实现。
<link rel="stylesheet" href="../icon/iconfont.css">
此中方法的本质是将这3步都写好封装在css文件中了,找到对应的类名调用就可。并且声明的你的字体类型(第二步的font-familly
,可以选择下图的封装好的样式iconfont
,或者把font-familly:"iconfont"
放进你的样式中。
使用示例:假如我需要在span中生成一个字体图标。
方法一:都用封装好的css,前提是字体文件已经复制到项目文件夹,并且改好路径和link css进html中。
<span class="iocnfont icon-zhifubao">支付宝</span>
这样子就可以显示图标了。
方法二:当不想用别人的样式的时候。
<span class="span1 icon-zhifubao">支付宝</span>
span1是你自取的样式名(class或id名都可以) ,只要在span1中代码:font-familly:"iconfont"
即可。
下图为一个封装好的图片css,使用时是需要改变其路径。
https://www.iconfont.cn 网上的字体图标,都是免费的。