为什么使用:在伪元素之前显示字形图标?

时间:2016-12-11 14:48:15

标签: css glyph

这个问题长期困扰着我的大脑。似乎所有字形图标库都以这种方式提供图标,例如Font Awesome。这是将字形放在css中的唯一方法吗?或者这是最好的方式吗?

private readonly Expression<Func<TEntity, TProperty>> _property;

private Expression<Func<TEntity, bool>> insensitiveEqualityPredicate(string formula)
{
    return Expression.Lambda<Func<TEntity, bool>>(
        Expression.Equal(
            Expression.Call(_property.Body, "ToLower", Type.EmptyTypes),
            Expression.Constant(formula.ToLower(), typeof(string))
        ),
        _property.Parameters
    );
}

2 个答案:

答案 0 :(得分:4)

我觉得这个问题可以分为两个单独的问题:

  1. 为什么要将字体用于图标?

  2. 为什么要使用:在伪元素之前显示它们?

  3. 对于第一部分,reasons are many,但它归结为易于使用(因为它们是矢量,本质上具有透明背景,可以轻松改变颜色)并且甚至在旧版浏览器上也得到了非常好的支持

    对于第二部分,使用伪元素意味着您的图标可以完全“存活”在CSS文件中。除了在那里编辑更容易之外,这也是它们所属的地方 - 它们不是你内容的一部分,而是影响它外观的东西,因此不应该在你的HTML中。将其视为same distinction as between img tag and background-image CSS property(再次 - 设计与内容)。

    此外,这可以防止一些奇怪的副作用,例如,无法选择伪元素,因此无法复制。如果不是这种情况,所有图标在复制时会在您复制它们的目的地中产生奇怪的字符。

答案 1 :(得分:1)

您也可以将它们用作&#39; i&#39;标签。我们可以通过这种方式应用更多创造性的CSS。这是一个codepen:

http://codepen.io/anon/pen/gLdYqj

{{1}}