Font Awesome nasıl kullanılır?

ErrorCorrection · 12 Mart 2023

Siteden kod aldım olmadı. CDN kullandım o yarı oldu, yarı olmadı. Nasıl yapabilirim?

Fatalis · 13 Mart 2023

Yarı oldu yarı olmadı derken? Font Awesome'daki tüm ikonlar ücretsiz değil zaten.

ErrorCorrection · 13 Mart 2023

Fatalis dedi:
Yarı oldu yarı olmadı derken? Font Awesome'daki tüm ikonlar ücretsiz değil zaten.

Hocam yaptım hallettim de evet bende fark ettim bazıları ücretsiz değil ama kullanırken bozuk çıkıyor ya da çıkmıyor kare şeklinde bir şey geliyor ekrana.

quickLAT · 13 Mart 2023

Kullandığınız kodu atabilir misiniz? Veya direkt şunuda deneyebilirsiniz o kod yerine, eğer bu şekilde bir şey kullanmıyorsanız.

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Fatalis · 13 Mart 2023

ErrorCorrection dedi:
Hocam yaptım hallettim de evet bende fark ettim bazıları ücretsiz değil ama kullanırken bozuk çıkıyor ya da çıkmıyor kare şeklinde bir şey geliyor ekrana.

Ikonun tipinden dolayı olabilir ona dikkat ediyor musunuz? Bazı ikonlar solid, bazıları regular, bazılarıysa brand isimleriyle çıkıyor karşımıza. Bunlara göre ayrı class vermelisin, örneğin brands yani markalar için fa-brands fa-facebook yazman gerekirken solid ikonlar için fa-solid fa-envelope şeklinde kullanmalısın, regular için de fa-regular fa-envelope gibi.

TurkishHepiNeyşın34 · 31 Mart 2023

ErrorCorrection dedi:
Siteden kod aldım olmadı. CDN kullandım o yarı oldu, yarı olmadı. Nasıl yapabilirim?

Hocam yapacağınız şey şu. Fontawesome sitesine gidip kit oluşturup ordaki scripti kodunuzun head kısmına ekleyeceksiniz. Daha sonra orda icons kısmına gelip istediğiniz iconun üzerine tıklayıp css classını alcaksınız veya div olarak otomatik kopyalayacaksınız.

Mesela:

HTML:

<html>
    <head>
        <script src="https://kit.fontawesome.com/3d4e5897c0.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <!--Örnek Div-->
        <div class="fa-solid fa-house"></div>
        <!--Buton-->
        <button class="fa-solid fa-house"></button>
    </body>
</html>

Ücretsiz iconlar buradan seçilebilir:

Sharp Solid Style Icons | Font Awesome

Font Awesome Sharp cuts into the scene with a clean, modern look that pairs nicely with sharp typefaces and can dress up for more professional occasions and projects. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

Eğer kit uğraşmakla istemiyorsanız benimkini kullanın:
<script src="https://kit.fontawesome.com/3d4e5897c0.js" crossorigin="anonymous">

Font Awesome nasıl kullanılır?

ErrorCorrection

Hectopat

Fatalis

Terapat

ErrorCorrection

Hectopat

quickLAT

Picopat

Fatalis

Terapat

TurkishHepiNeyşın34

Hectopat

Sharp Solid Style Icons | Font Awesome