如何在您的sass文件中包含Font Awesome图标？

如何使用@include在您的sass文件中使用Font awesome图标。如何在您的sass文件中包含Font Awesome图标？

EG - 如果我想用这个图标： http://fortawesome.github.io/Font-Awesome/icon/pencil/

我明白，你可以用它在你的HTML这样的：

<i class="fa fa-pencil"></i>

不过，我希望能够做到以下几点或类似的东西：

.class-name { 
    @include: fa-icon(fa-pencil); 
}

什么是默认/正确的方法来做到这一点？

来源

2015-07-04 ifusion

已经有一个线程，可以帮助你：http://stackoverflow.com/questions/18179098/how-to-use-font-awesome-in-own-css –

这不是很想我是如何ab为了做到这一点，我希望能够使用mixin。通过它的外观，我可能不得不使用自定义混合，因为它看起来不像我可以做到这一点默认情况下 – ifusion

我结束了工作。有几个方法可以做到这两者非常相似：

选择一个

编辑现有@mixin fa-icon()通过添加参数进去例如，它应该是这样的：

@mixin fa-icon($icon) { 
    display: inline-block; 
    font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration 
    font-size: inherit; // can't have font-size inherit on line above, so need to override 
    text-rendering: auto; // optimizelegibility throws things off #1094 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    transform: translate(0, 0); // ensures no half-pixel rendering in firefox 
    @extend .fa; 
    @extend .fa-#{$icon}; 

}

用法：

.class-name { 
    @include fa-icon(facebook); 
    font-size: 50px;  
}

选项2：

使用这个定制的mixin：http://genesy.me/font-awesome-mixin/

来源

2015-07-04 02:52:38 ifusion

最简单的方法是使用@extend。

在你的情况：

.class-name { 
    @extend: .fa-pencil; 
}

来源

2016-03-18 11:41:49 Sommereder

不知道是否有人会有所帮助，但我创建的扩展.fa类混入而不是编辑现有@mixin fa-icon()

自定义密新

@mixin icon($icon) { 
    @include fa-icon; 
    @extend .fa; 
    @extend .fa-#{$icon}:before; 
}

用法

.foo:before { 
    @include icon(pencil); 
}

其中 '铅笔' 是这里引用的图标的名称（减去fa-）：https://fortawesome.github.io/Font-Awesome/icons/

更新字体真棒5：

@mixin icon($icon) { 
    @include fa-icon; 
    @extend .fas; 
    @extend .fa-#{$icon}; 
}

来源

2016-03-29 13:16:10

如何在您的sass文件中包含Font Awesome图标？

回答

相关问题