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

من چیزهای بزرگی را که با استفاده از آیکون فونت ها میتوانیم به آن دست پیداکنیم را به شما نشان میدهم. اما ابتدا من نگاهی کوتاه با آنچه آیکون فونت ها هستند و نکات مثبت و منفی آنها میاندازم. سپس ما دو آیکون فونت محبوب را مورد آزمایش قرار میدهیم و مثال های مختلفی از چگونگی استفاده از آنها در پروژه ها را نشان خواهیم داد.

۱-آیکون فونت چیست؟

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

۱-۱- جوانب مثبت و منفی برای آیکون فونت

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

شما میتوانید با استفاده از کد های Css به آنها استایل دهید.
چون آنها وکتور های گرافیکی هستند قابلیت بزرگ و کوچک شدن در اندازه مختلف را دارند. این به آن معنی است که شما میتوانید بدون از دست دادن کیفیت آن ها را بزرگ یا کوچک کنید.
شما یک ویا چند درخواست HTTP برای بارگیری آنها به جای ارسال چندیدن درخواست HTTP برای بار گیری عکس های بیت مپ ارسال میکنید.
سرعت بارگیری آنها به دلیل اندازه کوچکشان زیاد است.
درتمام مرورگر ها پشتیبانی میشود (حتی با IE6)

بنابراین، آیا آیکون فونت ها برای همه موارد مناسب هستند؟ نه، البته که نه. آنها یک راه عالی برای بهبود و ارتقا طراحی پروژه ها هستند اما محدودیت هایی نیز دارند.برای مثال, اگر شما میخواهید از یک تصویر پیچیده به جای استفاده از یک آیکون ساده در پروژه خود استفاده کنید، آیکون فونت راه حلی خوبی نیست.

همچنین آنها معمولا به یک رنگ محدود هستند, مگر اینکه شما از برخی از ترفندهای css استفاده کنید. علاوه بر این، فونت آیکون با توجه به اندازه های خاص طراحی شده، برای ۱۶px16 به عنوان مثال، ۳۲ × ۳۲، ۴۸ × ۴۸، و غیره. اگر به هر دلیلی شما اندازه۲۵ × ۲۵ میخواهید ، احتمالا نتیجه خوبی نمیگیرید. ( ویژگی خاص CSS نیز می تواند کمک کند).

فراتر از آیکون فونت ، بهتر است روش محبوب دیگری برای آیکون های وکتوری را ذکر کنیم:

آیکون SVG . این روش توانایی برای غلبه بر برخی از مشکلاتی که آیکون فونت ممکن است داشته باشد. به عنوان مثال، شما می توانید بیش از یک رنگ به آنها اعمال کنید.

در ادامه این مقاله، ما اصول اولیه دو کتابخانه محبوب آیکون فونت را پوشش میدهیم:

Font Awesome
IcoMoon

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

۲-Font Awsome

Font Awesomeمجموعه ای غنی از ۴۳۹ آیکون است. این کتابخانه یا برای استفاده شخصی یا تجاری کاملا رایگان است. به طور طبیعی، Font Awesome برای بوت استراپ طراحی شده بود، با این حال شما می توانید آن را در هر یک از فریم ورک های مورد علاقه خود استفاده کنید.

۲-۱- آغاز به کار Font Awsome

ساده ترین راه برای پروژه های خود شامل فونت Awesome را از طریق شبکه های تحویل محتوا (CDN) است. به هر حال اگر شما Offline کار میکنید، باید بسته آیکون را دانلود کنید.

همچنین شما میتوانید برای پیدا کردن و عبارتند از فایل css و پوشه فونت شامل فرمت های مختلف فونت ایجاد کنید.سپس , شما باید فایل های css خود را به سند HTML اضافه کنید.در نهایت , شما باید مطمئن شوید که در دستور font-face @ مسیرهای داده شده در خصوصیت src را درست درج کرده اید. برای مشاهده فهرست کامل از تمام راه های ممکن برای تنظیم این آیکون برای پروژه های خود ، لینک راهنمای شروع آن را ببینید.

به منظور استفاده از آیکون ها ، شما باید محل آنها را در داخل span یا یک i قرار دهید . سپس شما باید دو کلاس به انها اختصاص دهید. کلاس FA به علاوه یک کلاس دوم, که باید نام آیکونی که می خواهید از آن در پروژه استفاده کنید باشد ، به عنوان مثالfa-home. درcheat sheet آنها شما میتوانید نام تمام آیکون های موجود در بسته را ببینید.

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

http://fortawesome.github.io/Font-Awesome/examples/

بیاید در عمل سه نمونه مختلف که با استفاده از فونت ایکون Awesome را ببینید.

۲-۲- مثال یک Font Awsome

در این مثال اول، ما یک منو navigation عمودی ایجاد میکنیم .ابتدا ما ایکون را در داخل یک wrapper قرار داده و دوبرابر اندازه wrapper حامل آن را با استفاده از کلاس از پیش تعریف شده FA-2Xبه آن نسبت میدهیم. سپس ما انها را با استفاده از css به آن استایل میدهیم .

HTML برای چنین منویی به صورت زیر است :

<li>

    <a href=”#” data-name=”Home”>

        <i class=”fa fa-home fa-2x”></i>

    </a>

</li>

<li>

    <a href=”#” data-name=”About”>

        <i class=”fa fa-bullhorn fa-2x”></i>

    </a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

و در اینجا CSS مربوطه:

nav li {

    background: #ededed;

    height: 80px;

    width: 80px;

    line-height: 80px;

    text-align: center;

}

nav li:not(:first-child) {

      margin-top: 1px;

}

nav li a {

    outline: none;

    position: relative;

    width: 100%;

    height: 100%;

}

nav i {

    color: steelblue;

    vertical-align: middle;

}

nav li a:after {

    background: #ededed;

    content: attr(data-name);

    display: none;

    margin-left: 1px;

    width: 160px;

    height: 80px;

    left: 80px;

    position: absolute;

    font-size: 1.2em;

}

nav li a:hover:after {

    display: inline-block;

}

nav li {

background: #ededed;

height: 80px;

width: 80px;

line-height: 80px;

text-align: center;

}

nav li:not(:first-child) {

margin-top: 1px;

}

nav li a {

outline: none;

position: relative;

width: 100%;

height: 100%;

}

nav i {

color: steelblue;

vertical-align: middle;

}

nav li a:after {

background: #ededed;

content: attr(data-name);

display: none;

margin-left: 1px;

width: 160px;

height: 80px;

left: 80px;

position: absolute;

font-size: 1.2em;

}

nav li a:hover:after {

display: inline-block;

}

و در نتیجه در نسخه ی نمایشی را در سایت زیر مشاهده کنید:

http://codepen.io/SitePoint/pen/GFspr

۲-۳- فونت Awesome مثال ۲#

در این مثال بعدی، ما یک پنل شبکه اجتماعی ساده ایجاد خواهیم کرد. برای این کار، ما آیکون ها را در داخل یک تگ i میگذاریم و با استفاده از کلاس FA-2X اندازه آن را دو برابر اندازه تگ حامل آن میکنیم. سپس با استفاده از CSS به آن استایل میدهیم.

HTML برای یک آیکون میتواند مانند نمونه زیر باشد :

<a href=”#” title=”Like us!”>

    <i class=”fa fa-facebook fa-2x”></i>

</a>

</a>

و CSS هایی برای طرح دادن به آیکون ها:

section a {

  padding: 7px;

  color: black;

}

section i {

  vertical-align: middle;

  transition: color .3s ease-in-out;

}

section a:nth-child(1):hover i {

  color: #3b5998;

}

section a {

padding: 7px;

color: black;

}

section i {

vertical-align: middle;

transition: color .3s ease-in-out;

}

section a:nth-child(1):hover i {

color: #3b5998;

}

در اینجا نسخه ی نمایشی است با ورود به سایت مشاهده کنید:

http://codepen.io/SitePoint/pen/hFbBL

۲-۴- فونت Awesome مثال ۳#

در این مثال سوم،ما از ایکون ها در فرم ورود استفاده میکنیم. ما با استفاده از آیکون به همان روش به عنوان نمونه های قبلی. ما فقط یک کلاس از پیش تعریف شده FA-FX برای دادن عرض ثابت به آنها میدهیم. (حدود ۱٫۲۵em).

HTML و CSS شبیه به نمونه های قبلی هستند، و در اینجا نتیجه را در سایت زیر مشاهده کنید:

http://codepen.io/SitePoint/pen/DbIaC

توجه کنید که آیکون های استفاده شده همانند آیکون های شبکه اجتماعی هستند.

۳- آیکن IcoMoon

IcoMoon یکی دیگر از آیکون فونت های محبوب است. IcoMoon دو بسته آیکون متفاوت دارد که یکی متن باز و برای استفاده همگان است و دیگری برای کاربران این سایت و پولی است.

با توجه به بسته شما انتخاب می کنید، تعداد و فرمت آیکون در دسترس متفاوت خواهد بود. به عنوان مثال، تعدادی از آیکون برای بسته رایگان ۴۵۰ است، اما برای بسته نهایی آن ۱۲۶۶٫

فراتر از این بسته ها، IcoMoon برنامه آنلاینی که شما در آن می توانید بیش از ۳۵۰۰ آیکون جستجو و به صورت رایگان دانلود کنید را فراهم می کند. این برنامه چند گزینه ویرایش اولیه، شامل گزینه هایی برای آنها چرخش، تغییر رنگ آنها، و بیشتر به کار میرود را فراهم می کند .

همچنین گزینه ای برای وارد کردن آیکون خود و یا حتی ایجاد فونت آیکون سفارشی برای شما وجود دارد. در نهایت، برخی از (گزینه های اساسی و نامحدود) برنامه های رایگان و پرداخت وجود دارد.

۳-۱- آغاز به کار با IcoMoon

بسته ای که شما برای دانلود انتخاب کنید شامل آیکون در فرمت های مختلف (به عنوان مثال SVG، PSD، AI) است. با استفاده از برنامه وب، هنگامی که آیکونی که را انتخاب می کنید، می توانید آنها را در قالب SVG ( ما از این گزینه استفاده نمی کنیم) و یا به عنوان فونت آیکون دانلود کنید.

به محض این که شما آیکون دانلود کردید ، باید فایل Css و پوشه فونت های ایجاد شده که شامل فونت با فرمت های مختلف است را در پروژه خود استفاده کنید و مطمئن شوید که آدرس های داده شده در خصوصیت Src در دستور @font-face شما به درستی کار میکنند. همچنین گزینه ای برای استفاده سریع از این فونت وجود دارد که شما با اضافه کردن یک link به صفحه HTML خود میتوانید از آن استفاده کنید.( همانند استفاده فنوت ها از یک CDN ) و بعد از آن شما میتوانید از آیکون های دلخواهتان استفاده نمایید.به هر حال، این گزینه فقط برای کاربرانی است که حق عضویت پرداخته اند. طرح اولیه به عنوان یک گزنه مطرح شده است اما استفاده آن به یک روز محدود میشود.

همانند awesome ،برای استفاده از IcoMoon. شما باید هریک از آنها را در داخل یک تگ Span قرار دهید. سپس کلاسی باید به آن نسبت دهید که اسم آن کلاس ، مطابق با آن آیکونی باشد که شما میخواهید به پروژه خود اضافه کنید، برای مثال icon-home . شما همچنین می توانید قبل از اینکه فونت آیکون را دانلود کنید، نام آیکون از تب Preferences سفارشی انتخاب کنید (به جای پیشوند پیش فرض، شما می توانید پیشوند خود تنظیم کنید) .

بیایید به یک مثال نگاه کنیم.

۳-۲- مثال IcoMoon

در این مثال، ما آیکون برای ایجاد یک بخش که به روند کار شرکت ما مرتبط است استفاده خواهیم کرد. ما آیکون را در داخل یک Span قرار داده و با استفاده از CSS به آن استایل میدهیم.

HTML برای دو آیکون همانند زیر است :

<li>

    <span class=”icon-pencil”></span>

    Analyze

</li>

<li> + </li>

<li>

    <span class=”icon-paint-format”></span>

    Design

</li>

<li> + </li>

<li>

Analyze

</li>

<li>

Design

</li>

CSS ما:

section li:nth-child(even) {

  color: #ededed;

  width: 6%;

  font-size: 2.5em;

  height: 63px;

  margin-top: 31.5px;

  line-height: 63px;

}

section span {

  padding: 15px 0;

  font-size: 5em;

  display: block;

  color: steelblue;

  transition: all .2s ease-in-out;

}

section li:hover span {

  transform: translateY(-10px);

}

section li:nth-child(even) {

color: #ededed;

width: 6%;

font-size: 2.5em;

height: 63px;

margin-top: 31.5px;

line-height: 63px;

}

section span {

padding: 15px 0;

font-size: 5em;

display: block;

color: steelblue;

transition: all .2s ease-in-out;

}

section li:hover span {

transform: translateY(-10px);

}

و نسخه ی نمایشی را در سایت زیر مشاهده کنید:

http://codepen.io/SitePoint/pen/nIHkm

۴-نتیجه

من امیدوارم که این تور آموزشی از محبوب ترین آیکون فونت ها برای شما جالب بوده باشد و ممکن است شما را تشویق به استفاده از آنها در پروژه های آینده تان بکند.

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

۵-منبع

http://www.sitepoint.com

توکاسافت

مقدمه ای بر آیکون فونت با فونت Awesome و IcoMoon

۱-آیکون فونت چیست؟

۱-۱- جوانب مثبت و منفی برای آیکون فونت

۲-Font Awsome

۲-۱- آغاز به کار Font Awsome

۲-۲- مثال یک Font Awsome

۲-۳- فونت Awesome مثال ۲#

۲-۴- فونت Awesome مثال ۳#

۳- آیکن IcoMoon

۳-۱- آغاز به کار با IcoMoon

۳-۲- مثال IcoMoon

۴-نتیجه

۵-منبع

نظرات کاربران

ارسال نظر لغو پاسخ