آموزش ساخت آیکون فونت های اختصاصی – قسمت چهارم – استفاده از آیکون ها در صفحه وب

3947 بازدید
پنج شنبه ۲۶ شهریور ۱۳۹۴
آموزش ساخت آیکون فونت های اختصاصی - قسمت چهارم - استفاده از آیکون ها در صفحه وبReviewed by جواد نبوی on Sep 17Rating: 5.0

سلام دوستان عزیز;

در قسمت های قبلی این آموزش(قسمت اول , قسمت دوم , قسمت سوم), نحوه ساخت فونت آیکون های اختصاصی و گرفتن خروجی رو یاد گرفتیم. در این قسمت میخوایم ببینیم که چطور میشه از این فونت آیکون ها در صفحات وب استفاده کرد. قرار دادن فونت آیکون ها در صفحات وب خیلی سادست. فقط کافیه آموزش زیر رو با دقت بخونید و انجامش بدید.

مرحله پنجم: استفاده از مجموعه آیکون فونت ساخته شده در طراحی وب

اول از همه فولدری که در انتهای قسمت سوم آموزش, اکسترکت کرده بودید رو باز کنید (فولدری که اولِ اسمش, fontello دارد). سپس در همین فولدر, پوشه ی font رو کپی کنید و در محلی که فایل استایل اصلی قالبتون قرار داره پیست کنید. دوباره به پوشه فونتلو برگردید و فایل demo.html رو با یک نرم افزار ویرایش متن باز کنید.

بعد از باز کردن, از عبارت font-face@ تا آخرین عبارت { قبل از تگ <style/> رو کپی کنید و در فایل استایل اصلی قالبتون وارد کنید. کدی که کپی می کنید باید به صورت زیر باشه:

CSS
@font-face {
کد های فراخوانی آیکون فونت
}
.demo-icon{
کد های استایل دهی به آیکون ها
}

دقت کنید که ابتدا و انتهای کدی که کپی می کنید دقیقا مثل کد بالا با font-face@ شروع بشه و با { تموم بشه.

حالا در همون پوشه اصلی فونتلو (که تو قسمت سوم اکسترکت کرده بودید) فولدر CSS رو باز کنید و فایل fontello.css رو با یک نرم افزار ویرایشگر متن اجرا کنید. تو این فایل بگردید و هر گزینشگری که با icon. شروع میشه رو کپی کنید و در فایل استایل اصلی قالبتون واردش کنید.

مثلا من کد زیر رو وارد فایل استایل قالبم کردم:

CSS
.icon-A:before { content: '\e800'; } /* '' */
.icon-ok-squared:before { content: '\e801'; } /* '' */
.icon-link-ext-alt:before { content: '\e802'; } /* '' */
.icon-attach:before { content: '\e803'; } /* '' */
.icon-user:before { content: '\e804'; } /* '' */
.icon-users:before { content: '\e805'; } /* '' */
.icon-camera:before { content: '\e806'; } /* '' */
.icon-tags:before { content: '\e807'; } /* '' */

کدی که شما کپی می کنید هم باید همچین شکلی داشته باشه.

در مرحله بعد, کد زیر رو قبل از تگ <head/> قالبتون, وارد کنید:

JavaScript
    <script>
      function toggleCodes(on) {
        var obj = document.getElementById('icons');
        
        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }
      
    </script>

تا اینجا کار های لازم برای فراخوانی و استایل دهی به آیکون ها رو انجام دادیم. حالا باید از آیکون ها در جایی که می خوایم استفاده کنیم.

برای استفاده از آیکون ها در هر قسمت از قالب سایت که میخواید نمایش داده بشه کد زیر رو وارد کنید:

HTML
<i class="demo-icon icon-name"></i>

به جای عبارت icon-name در کد بالا, باید نام آیکون مورد نظرتون رو قرار بدید. برای پیدا کردن نام آیکون ها باید فایل demo.html رو با مرورگرتون باز کنید. بعد از باز کردن این فایل, جلوی هر آیکون, اسمش قرار داره و میتونید اونو کپی کنید و به جای عبارت icon-name در کد بالا قرار بدید.

مثال:

HTML
<i class="demo-icon icon-A"></i>

میتونید کلاس های دیگه ای هم به کد بالا بدید و هر استایلی که دوست دارید روش اعمال کنید.

آموزش ساخت آیکون فونت های اختصاصی در اینجا به پایان رسید. امیدوارم مفید بوده باشه. درصورتی که سوالی دارید میتونید در نظرات بپرسید. خدانگهدار

قسمت های قبلی این آموزش:

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

13 دیدگاه برای “آموزش ساخت آیکون فونت های اختصاصی – قسمت چهارم – استفاده از آیکون ها در صفحه وب”

  1. hasan گفت:

    سلام
    من همه کارهایی رو که گفتید رو به ترتیب انجام دادم .شاید ۲۰ بار این کاتر رو انجام دادم ولی فقط یه بار تونستم فونت رو بیارم .نمیدونم باید چه کار کنم؟

    1. جواد نبوی گفت:

      سلام دوست عزیز
      دقیقا تو کدوم قسمت مشکل دارید؟
      اگه فایل پروژه تون رو اینجا قرار بدید شاید بهتر بتونم راهنماییتون کنم

  2. مجید گفت:

    سلام. اون تیکه script جاوا برای چیه؟ توی FontAwsome هم همچین کدی هست؟

    1. جواد نبوی گفت:

      سلام. مربوط به فراخوانی آیکون ها هست. فونت آسم هم فکر میکنم همچین کدی داشته باشه.

  3. ali گفت:

    سلام
    یه سوال چطوری میشه سایز فونت رو بیشتر کنم خیلی ریز و کوچیک…

    1. جواد نبوی گفت:

      سلام
      مقدار خصوصیت font-size رو بیشتر کنید

  4. بهار گفت:

    سلام
    کد script رو در چه فایلی قبل از تگ کپی کنم؟

    1. جواد نبوی گفت:

      سلام
      تگ در اکثر قالب های وردپرس در فایل header.php قرار داره. اما اگر نبود باید در فایل index.php دنبال این کد بگردید. اگر باز هم نبود فایل های دیگه ی قالب رو باز کنید و دنبال این تگ بگردید و کد script رو قبلش قرار بدید

  5. محمدرضا الطافی گفت:

    سلام و خسته نباشید

    ممنون خیلی به دردم خورد کارم راه افتاد. دمتون گرم. موفق باشید

    1. جواد نبوی گفت:

      خواهش می کنم دوست عزیز
      موفق باشید

  6. صابرلطفی گفت:

    سلام
    من نتوستم فایل fontello.css و کدهای مربوط به اون پیدا کنم

    1. جواد نبوی گفت:

      سلام
      این فایل درون فایل فشرده ای که از سایت fontello دانلود کردید موجود است

  7. بهار گفت:

    باسلام مرسی به خاطر وبسایت فوق العادتون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *