با قدیما استفاده از آیکن در وب سایت خیلی مشکل بود چون مجبور بودیم تصاویر مختلف پیدا کنیم و در فتوشاپ resize کنیم تا آماده برای استفاده در سایت شود.بعد ها تکنیک CSS Sprite آمد و کمی این کار راحت تر شد ولی هنوز مشکلاتی مثل سرعت لود پایین و حجم زیاد تصاویر پابرجا بود. برای همین آیکن ها را داخل فونت قرار دادند تا هم مزیت های فونت (تغییر سایز و رنگ بدون افت کیفیت در CSS) و حجم کم سرعت لود بالا و استفاده آسان در همه جای سایت یکجا در اختیار طراحان وب قرار گیرد.
در حال حاضر این تکنیک که وب فونت Web Font نامیده می شود در اکثر سایت های روز دنیا استفاده می شود و یکی از کتابخانه های مطرح و کامل در این زمینه FontAwesome می باشد.
این کتابخانه در حال حاضر بیش از 600 آیکن در زمینه های مختلف و حتی لوگو برندهای مطرح را در خود جای داده است.برای استفاده از آن دو راه دارید.
- دانلود کامل FontAwesome – نیاز به دانلود فایل ها دارد
- استفاده از CDN – نیاز به دانلود فایل ها ندارد ولی برای استفاده لوکال همیشه باید به اینترنت متصل باشید
دانلود و نصب FontAwesome
با مراجعه به آدرس fontawesome.io/get-started و زدن دکمه Download فایل zip این کتابخانه را دانلود نمایید و در پوشه سایت خود از حالت فشرده خارج نمایید . فقط کافیست فایل font-awesome.min.css را به صورت زیر در بخش <head> صفحه وارد نمایید:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
استفاده از CDN
در این روش شما فایل ها را دانلود نمی کنید و از فایل های روی سرور که در سایت آدرس آنها قرار دارد ، استفاده می کنید.مزیت این روش استفاده سریع و راحت است ولی مشکلاتی نیز دارد مثلا وقتی سایت را روی کامپیوتر خودتان طراحی می کنید باید همیشه به اینترنت وصل باشید تا بتواند از سرور CDN فایل ها را لود کند و همچنین در بعضی مواقع ممکن از سرعت سایت را کند کند.
در این روش کافیست به این لینک رفته و در کادر بالا آدرس ایمیل تان را وارد کنید تا لینک CDN برای تان ارسال شود.که مثل لینک زیر خواهد بود:
<script src="https://use.fontawesome.com/84c3f8fd28.js"></script>
و به همان روش بالا به بخش <head> اضافه کنید.
روش استفاده از FontAwesome
حالا که این کتابخانه را نصب کردید ، کافیست به این صفحه برید و آیکن دلخواه تون رو پیدا کنید و روش کلیک کنید. در صفحه باز شده آسکن مورد نظر در سایزهای مختلف دیده می شود که در زیر این بخش کدی شبیه این کد رو می بینید:
<i class="fa fa-linode" aria-hidden="true"></i>
هر جایی که می خواهید آیکن مورد نظر رو نمایش بدید باید این کد رو همونجا کپی کنید. عبارت یا کلاس fa-linode ،آیکن مورد نظر را مشخص می کند و برای آیکن های مختلف متفاوت خواهد بود که در صفحه هر آیکن می توانید آن را پیدا کنید.
امیدوارم از این کتابخانه استفاده کنید و لذت ببرید.
با سلام و خسته نباشید عذر میخوام من از هر دو روشی که فرمودین رفتم ینی هم برنامه رو نصب کردم ولی جز چندتا پوشه هیچ icon نیست که من بتونم روش کلیک کنم و هم از زوش دوم رفتم یعنیemail فرستادم ولی هیچ کدی برا من ارسال نشد
سلام وقت بخیر
ببخشید من از این FontAwesomeاستفاده کردم ولی زمانی که میخوام کد ajaxکار کنم کنسول خطای مربوط به این رو بم میده چرا؟؟؟
downloadable font: download failed (font-family: “FontAwesome” style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:14201/Content/fonts/fontawesome-webfont.woff2?v=4.6.3
سلام
به صفحه مراجعه میکنم اما ایکنی نمی بینم!!که بخوام کدش بردارم.
ممنون بابت راهنمایی
با سلام و خسته نباشید خدمت شما بزرگوار
بنده قالب vega را در وردپرس سایتم نصب کردم اما می خواهم FontAwesome سایتم را به تصویر دلخواهم تغییر دهم ، اما با ویژوال کمپوزر نمی توانم زیرا قسمت قابل تغییر من برگه نمی باشد
ممنون میشم از راهنمایی اینجانب
سلام
وقتت تون بخیر
من دارم یه قالب طراحی میکنم.اول اومدم دانلودش کردم .بعد فایل css و فونت هارو جای خودش قرار دادم اما موقع نمایش یه مربع کوچیک نشون میده..ممنون میشم راهنمایی کنید
سلام . ممنونم
معمولا وقتی به جای فونت کاراکترهای نامشخص نشون میده علامت اینه که به فونت آیکون دسترسی نداره. یا آدرس فونت آیکن ها درست نیست یا موجود نیستن و … . می تونین در صفحه قالب ، دکمه F12 رو بزنین و به تب console برید و خطاها رو بررسی کنید
منم همین مشکلو دارم راهنمایی کنید
سلام خدمت اقا علی گل یه سوال داشتم ایا استفاده از این کار باعث دیر لود شدن نمیشه؟ مثالا ما میایم برای طراحی واکنش گرا از بوت استرپ استفاده مکنیم و حتی برای ایکون هامون هم از سایت هایی مثل فوت آسوم استفاده میکنیم این کار ایا درست هستش یا نه؟
سلام دوست من . طبیعتا روی حجم صفحه تاثیر داره. می تونید کتابخونه های سبک تر مثل simple line icons رو هم امتحان کنین ولی اگر جوابگو نبودن مجبوریم پی حجم بالای FA رو به تن مون بمالیم!
عالی بود از راهنمایی هات استفاده کردم ممنون