{"id":40437,"date":"2026-02-27T00:41:32","date_gmt":"2026-02-26T21:41:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40437"},"modified":"2026-02-27T00:41:32","modified_gmt":"2026-02-26T21:41:32","slug":"how-to-use-font-awesome-5-with-react","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/how-to-use-font-awesome-5-with-react\/","title":{"rendered":"How To Use Font Awesome 5 with React"},"content":{"rendered":"

<\/p>\n

\n

Giri\u015f<\/h2>\n

Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren g\u00f6rsel \u00f6\u011felerden biri de ikonlard\u0131r. \u0130konlar, karma\u015f\u0131k bilgileri h\u0131zl\u0131 ve sezgisel bir \u015fekilde iletmenin yan\u0131 s\u0131ra, uygulaman\u0131za estetik bir dokunu\u015f katar. Font Awesome, web geli\u015ftiricileri aras\u0131nda en pop\u00fcler ikon k\u00fct\u00fcphanelerinden biridir. Binlerce farkl\u0131 stil ve kategoride ikon sunarak, projenizin her ihtiyac\u0131n\u0131 kar\u015f\u0131layabilir.<\/p>\n

React, dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Font Awesome’\u0131n esnekli\u011fi ile React’\u0131n bile\u015fen tabanl\u0131 yap\u0131s\u0131 birle\u015fti\u011finde, ikon y\u00f6netimi olduk\u00e7a kolay ve verimli hale gelir. Bu rehberde, Font Awesome 5’i bir React projesinde nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, temel ikonlar\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ve ikonlar\u0131 nas\u0131l \u00f6zelle\u015ftirece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Amac\u0131m\u0131z, uygulaman\u0131za profesyonel ve etkile\u015fimli ikonlar eklemeniz i\u00e7in kapsaml\u0131 bir yol haritas\u0131 sunmakt\u0131r.<\/p>\n

Kurulum ve Temel Kullan\u0131m<\/h2>\n

Font Awesome’\u0131 React projenizde kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle gerekli paketleri kurman\u0131z ve ard\u0131ndan ilk ikonunuzu eklemeniz gerekmektedir.<\/p>\n

React Projesini Haz\u0131rlama<\/h3>\n

E\u011fer hen\u00fcz bir React projeniz yoksa, create-react-app<\/code> kullanarak h\u0131zl\u0131ca yeni bir proje olu\u015fturabilirsiniz:<\/p>\n

npx create-react-app my-font-awesome-app\ncd my-font-awesome-app<\/code><\/pre>\n
Bu komutlar, projenizin temel yap\u0131s\u0131n\u0131 olu\u015fturacak ve proje dizinine ge\u00e7i\u015f yapman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n
Font Awesome Paketlerini Y\u00fckleme<\/h3>\n
Font Awesome’\u0131 React ile kullanmak i\u00e7in birka\u00e7 ana pakete ihtiyac\u0131m\u0131z var:<\/p>\n
1.  @fortawesome\/fontawesome-svg-core<\/code>: Font Awesome’\u0131n temel SVG i\u015flevselli\u011fini ve ikon k\u00fct\u00fcphanesi y\u00f6netimini sa\u011flar.
\n2.  @fortawesome\/react-fontawesome<\/code>: Font Awesome ikonlar\u0131n\u0131 React bile\u015fenleri olarak kullanmam\u0131z\u0131 sa\u011flayan adapt\u00f6r paketi.
\n3.  \u0130kon setleri: Hangi ikonlar\u0131 kullanmak istedi\u011finize ba\u011fl\u0131 olarak farkl\u0131 paketler y\u00fcklemeniz gerekir. En yayg\u0131n olanlar\u0131 \u015funlard\u0131r:
\n    *   @fortawesome\/free-solid-svg-icons<\/code>: D\u00fcz (solid) stil ikonlar (genellikle fas<\/code> \u00f6neki ile kullan\u0131l\u0131r).
\n    *   @fortawesome\/free-regular-svg-icons<\/code>: Konturlu (regular) stil ikonlar (genellikle far<\/code> \u00f6neki ile kullan\u0131l\u0131r).
\n    *   @fortawesome\/free-brands-svg-icons<\/code>: Marka ikonlar\u0131 (Twitter, Facebook vb.) (genellikle fab<\/code> \u00f6neki ile kullan\u0131l\u0131r).<\/p>\n
Bu paketleri projenize y\u00fcklemek i\u00e7in a\u015fa\u011f\u0131daki komutlar\u0131 kullan\u0131n:<\/p>\n
npm install @fortawesome\/fontawesome-svg-core @fortawesome\/react-fontawesome @fortawesome\/free-solid-svg-icons @fortawesome\/free-regular-svg-icons @fortawesome\/free-brands-svg-icons\n
veya yarn kullan\u0131yorsan\u0131z:<\/h2>\n
yarn add @fortawesome\/fontawesome-svg-core @fortawesome\/react-fontawesome @fortawesome\/free-solid-svg-icons @fortawesome\/free-regular-svg-icons @fortawesome\/free-brands-svg-icons<\/code><\/pre>\n<\/h2>\n
\u0130lk \u0130konunuzu Ekleme<\/h3>\n
Paketler y\u00fcklendikten sonra, bir ikon eklemek olduk\u00e7a basittir. \u0130konlar\u0131 do\u011frudan bile\u015fenlerinize import edip kullanabilirsiniz. \u00d6rne\u011fin, faCoffee<\/code> ikonunu App.js<\/code> dosyan\u0131za ekleyelim:<\/p>\n
\/\/ src\/App.js\nimport React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\nimport { faCoffee } from '@fortawesome\/free-solid-svg-icons'; \/\/ Kullanaca\u011f\u0131m\u0131z ikon\n\nfunction App() {\n  return (\n    
\n      \n      
\n        Kahve ikonu: \n      <\/p>\n      
\n        Font Awesome ile ikonlar\u0131 React uygulamalar\u0131n\u0131za eklemek \u00e7ok kolay!\n      <\/p>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n
Bu \u00f6rnekte:
\n*   FontAwesomeIcon<\/code> bile\u015fenini @fortawesome\/react-fontawesome<\/code> paketinden i\u00e7e aktard\u0131k.
\n*   Kullanmak istedi\u011fimiz faCoffee<\/code> ikonunu @fortawesome\/free-solid-svg-icons<\/code> paketinden i\u00e7e aktard\u0131k.
\n*   FontAwesomeIcon<\/code> bile\u015fenine icon<\/code> prop’u arac\u0131l\u0131\u011f\u0131yla faCoffee<\/code> ikonunu ge\u00e7irdik.<\/p>\n
Projenizi ba\u015flat\u0131p (genellikle npm start<\/code> ile) taray\u0131c\u0131n\u0131zda g\u00f6r\u00fcnt\u00fcledi\u011finizde, kahve ikonunun ba\u015far\u0131yla eklendi\u011fini g\u00f6receksiniz.<\/p>\n
\u0130kon K\u00fct\u00fcphanesini Y\u00f6netme<\/h2>\n
Uygulaman\u0131zda \u00e7ok say\u0131da ikon kullanmaya ba\u015flad\u0131\u011f\u0131n\u0131zda, her ikonu ayr\u0131 ayr\u0131 import etmek ve her yerde nesne olarak ge\u00e7mek pratik olmayabilir. Font Awesome, ikonlar\u0131 global bir k\u00fct\u00fcphaneye ekleyerek bu s\u00fcreci optimize etmenizi sa\u011flar. Bu yakla\u015f\u0131m, hem kodunuzu daha temiz tutar hem de uygulaman\u0131z\u0131n performans\u0131na katk\u0131da bulunabilir.<\/p>\n
\u0130konlar\u0131 K\u00fct\u00fcphaneye Ekleme<\/h3>\n
\u0130konlar\u0131 global k\u00fct\u00fcphaneye eklemek i\u00e7in @fortawesome\/fontawesome-svg-core<\/code> paketinden library<\/code> nesnesini kullan\u0131r\u0131z. Genellikle bu i\u015flemi uygulaman\u0131z\u0131n ana giri\u015f noktas\u0131 olan src\/index.js<\/code> dosyas\u0131nda veya \u00f6zel bir fontawesome.js<\/code> dosyas\u0131nda yapmak en iyi uygulamad\u0131r.<\/p>\n
\u00d6ncelikle, src\/fontawesome.js<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m:<\/p>\n
\/\/ src\/fontawesome.js\nimport { library } from '@fortawesome\/fontawesome-svg-core';\nimport { faCoffee, faUser, faCog, faSpinner } from '@fortawesome\/free-solid-svg-icons';\nimport { faGithub, faTwitter } from '@fortawesome\/free-brands-svg-icons';\nimport { faStar } from '@fortawesome\/free-regular-svg-icons'; \/\/ \u00d6rne\u011fin, d\u00fczenli bir ikon\n\n\/\/ Kullanaca\u011f\u0131m\u0131z t\u00fcm ikonlar\u0131 k\u00fct\u00fcphaneye ekliyoruz\nlibrary.add(\n  faCoffee,\n  faUser,\n  faCog,\n  faSpinner,\n  faGithub,\n  faTwitter,\n  faStar\n);<\/code><\/pre>\n
\u015eimdi bu dosyay\u0131 src\/index.js<\/code> dosyan\u0131zda i\u00e7e aktar\u0131n. Bu \u015fekilde, uygulama ba\u015flarken t\u00fcm bu ikonlar global k\u00fct\u00fcphaneye eklenmi\u015f olacakt\u0131r:<\/p>\n
\/\/ src\/index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport '.\/fontawesome'; \/\/ Font Awesome k\u00fct\u00fcphanemizi buraya import ediyoruz\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \n    \n  <\/React.StrictMode>\n);<\/code><\/pre>\n
Art\u0131k ikonlar\u0131 App.js<\/code> veya di\u011fer bile\u015fenlerinizde kullan\u0131rken, sadece ikonun ad\u0131n\u0131 (string olarak) ve stil \u00f6nekini (e\u011fer farkl\u0131 bir stilse) belirtmeniz yeterlidir. \u0130konlar\u0131 ayr\u0131 ayr\u0131 import etmenize gerek kalmaz:<\/p>\n
\/\/ src\/App.js\nimport React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\n\/\/ Art\u0131k faCoffee'yi burada import etmemize gerek yok!\n\nfunction App() {\n  return (\n    
\n      \n      
\n        Kahve ikonu: \n      <\/p>\n      
\n        Kullan\u0131c\u0131 ikonu: \n      <\/p>\n      
\n        Ayarlar ikonu: \n      <\/p>\n      
\n        GitHub ikonu: \n      <\/p>\n      
\n        Bo\u015f y\u0131ld\u0131z ikonu: \n      <\/p>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n
Bu y\u00f6ntem, kod tekrar\u0131n\u0131 azalt\u0131r ve uygulaman\u0131z\u0131n daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Farkl\u0131 Stil \u0130konlar\u0131 Kullanma<\/h3>\n
Font Awesome, ikonlar\u0131 farkl\u0131 stillerde sunar: Solid (dolu), Regular (konturlu), Light (hafif), Thin (ince) ve Brands (markalar). Free s\u00fcr\u00fcmde Solid, Regular ve Brands stillerine eri\u015febilirsiniz.<\/p>\n
K\u00fct\u00fcphaneye ikon eklerken, ikonun hangi paketten geldi\u011fi \u00f6nemi yoktur. library.add()<\/code> fonksiyonu onu do\u011fru \u015fekilde i\u015fler. Ancak, FontAwesomeIcon<\/code> bile\u015feninde kullan\u0131rken, ayn\u0131 isimde farkl\u0131 stillerde ikonlar varsa, stil \u00f6nekini belirtmeniz gerekir:<\/p>\n
*   Solid (Dolu):<\/strong> Varsay\u0131lan stil oldu\u011fu i\u00e7in genellikle \u00f6nek belirtmeye gerek kalmaz, ancak a\u00e7\u0131k\u00e7a belirtmek isterseniz icon={['fas', 'coffee']}<\/code> \u015feklinde kullanabilirsiniz.
\n*   Regular (Konturlu):<\/strong> icon={['far', 'star']}<\/code>
\n*   Brands (Markalar):<\/strong> icon={['fab', 'github']}<\/code><\/p>\n
Yukar\u0131daki App.js<\/code> \u00f6rne\u011finde bu kullan\u0131mlar\u0131 g\u00f6rebilirsiniz. Bu esneklik, uygulaman\u0131z\u0131n tasar\u0131m\u0131na uygun farkl\u0131 g\u00f6rsel a\u011f\u0131rl\u0131klara sahip ikonlar\u0131 kolayca kullanman\u0131z\u0131 sa\u011flar.<\/p>\n
\u0130konlar\u0131 \u00d6zelle\u015ftirme ve Geli\u015fmi\u015f Kullan\u0131m<\/h2>\n
Font Awesome, ikonlar\u0131n\u0131z\u0131 uygulaman\u0131z\u0131n tasar\u0131m\u0131na uyacak \u015fekilde \u00f6zelle\u015ftirmeniz i\u00e7in \u00e7e\u015fitli prop’lar sunar. Bu \u00f6zelle\u015ftirmeler, ikonlar\u0131n\u0131z\u0131n boyutunu, rengini, d\u00f6n\u00fc\u015f\u00fcn\u00fc ve animasyonunu kontrol etmenize olanak tan\u0131r.<\/p>\n
Boyutland\u0131rma<\/h3>\n
size<\/code> prop’u ile ikonlar\u0131n\u0131z\u0131n boyutunu kolayca de\u011fi\u015ftirebilirsiniz. De\u011ferler xs<\/code>, sm<\/code>, lg<\/code>, 2x<\/code>, 3x<\/code>, …, 10x<\/code> \u015feklinde olabilir.<\/p>\n
import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\n\/\/ fontawesome.js dosyas\u0131nda ikonlar\u0131 k\u00fct\u00fcphaneye ekledi\u011fimizi varsay\u0131yoruz\n\nfunction IconBoyutlari() {\n  return (\n    
\n      
\u0130kon Boyutland\u0131rma<\/h3>\n      
\n        K\u00fc\u00e7\u00fck: \n      <\/p>\n      
\n        Orta: \n      <\/p>\n      
\n        B\u00fcy\u00fck: \n      <\/p>\n      
\n        \u00c7ok B\u00fcy\u00fck: \n      <\/p>\n    <\/div>\n  );\n}\n\nexport default IconBoyutlari;<\/code><\/pre>\n
Renklendirme<\/h3>\n
\u0130konlar\u0131n\u0131z\u0131n rengini de\u011fi\u015ftirmek i\u00e7in color<\/code> prop’unu kullanabilir veya CSS ile stil verebilirsiniz.<\/p>\n
import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\n\nfunction IconRenkleri() {\n  return (\n    
\n      
\u0130kon Renklendirme<\/h3>\n      
\n        K\u0131rm\u0131z\u0131 kahve: \n      <\/p>\n      
\n        Mavi kullan\u0131c\u0131: \n      <\/p>\n      
\n        Ye\u015fil ayarlar (CSS ile): \n      <\/p>\n    <\/div>\n  );\n}\n\nexport default IconRenkleri;<\/code><\/pre>\n
CSS ile renklendirme yaparken, FontAwesomeIcon<\/code> bile\u015feni asl\u0131nda bir SVG olu\u015fturdu\u011fu i\u00e7in, color<\/code> \u00f6zelli\u011fi do\u011frudan SVG’nin fill<\/code> \u00f6zelli\u011fini etkiler.<\/p>\n
D\u00f6nd\u00fcrme ve Animasyon<\/h3>\n
Font Awesome, ikonlara basit animasyonlar ve d\u00f6n\u00fc\u015fler uygulaman\u0131z\u0131 sa\u011flayan kullan\u0131\u015fl\u0131 prop’lar sunar.<\/p>\n
*   spin<\/code>: \u0130konu s\u00fcrekli d\u00f6nd\u00fcr\u00fcr (y\u00fckleme ikonlar\u0131 i\u00e7in ideal).
\n*   pulse<\/code>: \u0130konu sekiz ad\u0131ml\u0131 bir d\u00f6n\u00fc\u015fle d\u00f6nd\u00fcr\u00fcr (daha yumu\u015fak bir animasyon).
\n*   rotate<\/code>: \u0130konu belirli bir derece (90, 180, 270) d\u00f6nd\u00fcr\u00fcr.<\/p>\n
import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\n\nfunction IconAnimasyonlari() {\n  return (\n    
\n      
\u0130kon Animasyonlar\u0131 ve D\u00f6n\u00fc\u015fleri<\/h3>\n      
\n        D\u00f6nen y\u00fckleme ikonu: \n      <\/p>\n      
\n        Nab\u0131z atan ayarlar ikonu: \n      <\/p>\n      
\n        90 derece d\u00f6nm\u00fc\u015f kullan\u0131c\u0131 ikonu: \n      <\/p>\n      
\n        180 derece d\u00f6nm\u00fc\u015f kahve ikonu: \n      <\/p>\n    <\/div>\n  );\n}\n\nexport default IconAnimasyonlari;<\/code><\/pre>\n
Sabit Geni\u015flik<\/h3>\n
Farkl\u0131 ikonlar\u0131n geni\u015flikleri genellikle farkl\u0131d\u0131r. Bir liste veya men\u00fcde ikonlar\u0131 hizalamak istedi\u011finizde bu durum g\u00f6rsel tutars\u0131zl\u0131\u011fa neden olabilir. fixedWidth<\/code> prop’u, t\u00fcm ikonlara ayn\u0131 geni\u015fli\u011fi uygulayarak bu sorunu \u00e7\u00f6zer.<\/p>\n
import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome\/react-fontawesome';\nimport { faHome, faInfoCircle, faEnvelope } from '@fortawesome\/free-solid-svg-icons';\nimport { library } from '@fortawesome\/fontawesome-svg-core';\nlibrary.add(faHome, faInfoCircle, faEnvelope); \/\/ Bu ikonlar\u0131 da k\u00fct\u00fcphaneye ekleyelim\n\nfunction SabitGenislik() {\n  return (\n    
\n      
Sabit Geni\u015flikli \u0130konlar<\/h3>\n