一泓清波

用字体在网页中画icon小图标

2019/01/07

图片拼接：css Sprite

把零星背景图片整合到一张图片文件中，再利用css的背景图片。定位到要显示的位置，因此也就"图片拼接"技术

好处：这样做可以减少文件体积和服务器的请求次数，从而提高效率

知识点：background-image background-position

图标大小要固定，需要保存为PNG-24的文件格式

js设置背景图标的位置

	var iconH = $(".sprite").fint("s").height();
		triggerLi = $(".sprite").children("li");
		triggerLi.each(function(){
		var $this = $(this);
			$index = $this.index();
		$this.children("s").css("background-position","0 -"+iconH*$index+"px");
			$this.hover(function(){
			//鼠标移入
				$this.children("s").css("background-position","-24px -"+iconH*$index+"px");
			},function(){
				$this.children("s").css("background-position","0 -"+iconH*$index+"px");
			})
		})

字体图标

  1. 浏览器对字体支持的情况

  2. 知识点

:before伪元素，创建一个虚假的元素，并插入到目标元素内容之前

content属性 与:before及:after伪元素配合使用，来插入生成内容

html例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        h1:before{
            content: "我在内容前";
        }
        h1:after{
            content: "我在元素后";
        }
    </style>
</head>
<body>
<h1> 我是元素h1 </h1>
</body>
</html>

字体图标的关键代码

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");/* IE9 兼容模式*/
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
  
  .fa-ad:before {
  content: "\f641"; }

.fa-address-book:before {
  content: "\f2b9"; }

.fa-address-card:before {
  content: "\f2bb"; }

.fa-adjust:before {
  content: "\f042"; }