如何在您的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圖標？

回答

相關問題