在css中使用字体图标库

1.svg图片的使用

1.css引入svg图片并修改大小

html

 <div class="icon"></div>

css

.icon{
    
    
   background-image: url(/icon.svg);
    width:19px;
    height:24px;
    background-size: 19px 24px;
}

使用 background-size和width、height控制图片大小。

1.2.修改svg图片的颜色

1.2.1. 方式1(修改svg文件)

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title></title>
<g id="icomoon-ignore"></g>
	<path fill="#000" d="xxx.xxx.xxx"></path>
</svg>

修改fill属性，写入你要修改的颜色即可。

1.2.2.方式2(利用drop-shadow)

html

<div class="icon-parent">
    <div class="icon"></div>
</div>

css

.icon{
    
    
	background-image: url(icon.svg);
   width:19px;
   height:24px;
   background-size: 19px 24px;
	filter: drop-shadow(#bf2c24 8000px 0);//复制一个icon出来，偏移一定距离
	transform: translateX(-80000px);// 将整个icon(包括复制出来的icon)，整体反方向偏移一样的具体，则复制的icon会替换原来的icon。
}

说明：如果偏移量足够大，超出屏幕大小，则原来的icon永远不会先是在屏幕上。

或者

.icon-parent{
    
    
        overflow:hidden;
    }
.icon{
    
    
   background-image: url(icon.svg);
   width:19px;
   height:24px;
   background-size: 19px 24px;
   filter: drop-shadow(#bf2c24 80px 0);//复制一个icon出来，偏移一定距离
   transform: translateX(-80px);
}

说明：给父元素icon-parent添加一个overflow:hidden;，会将子元素icon原来的icon图片进行遮盖，同样可以使原来的icon永远不会先是在屏幕上。