CSS 字体图标+定位+平面转换+渐变

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff') format('woff');
}
 
.icon-home:before {
    content: '\e001';
    font-family: 'MyFont';
}
 
.icon-home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}

这个例子中，我们首先定义了一个自定义字体，并在.icon-home:before伪元素中使用了字体图标。然后我们使用绝对定位将图标居中，使用translate进行平面转换。背景使用线性渐变从左到右渐变，边框半径为50%，设置了宽度和高度，并在图标内部居中显示文本。这个例子展示了如何结合多种CSS技术来创建一个有趣的图标。