فونت عالی 6: بررسی کامل
- 1 نحوه نصب قلم عالی
- روش 1.
- روش 2.
- 2 نحوه استفاده از نمادهای جذاب فونت
- 1 نماد استاندارد
- 2 نماد بزرگ
- 3 نماد عرض ثابت
- 4 آیکون برای لیست گلوله
- 5 آیکون و نقل قول قاب
- 6 نماد متحرک
- 7 نماد تبدیل شده
- 8 نماد ترکیبی
- 3 Font Awesome 4.5.0 collection, classes وتcss code to insert using the content property
- 4 منبع مرتبط
- اندازه نماد
- رنگ نماد
- سوالات متداول
Font Awesome مجموعه ای از نمادهای بردار مقیاس پذیر است. نمادها را می توان با استفاده از خواص CSS قالب بندی کرد ، رنگ ، اندازه ، سایه و موارد دیگر را تنظیم کرد. نسخه قلم 5.5.0 شامل 605 نماد است.
1 نحوه نصب قلم عالی
روش 1.
با اضافه کردن کد زیر به نسخه Font-Awesome.css از پرونده استفاده کنید<head> بخش:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">پس از اتصال قلم ، می توانید از نمادهای موجود در سایت خود استفاده کنید.
روش 2.
فونت را از ٪٪ Font Awesome ٪٪ بارگیری کنید. بایگانی را باز کنید و دو پوشه را از بایگانی به سرور سایت - CSS و قلم بارگذاری کنید. اگر قبلاً پوشه هایی با چنین نام هایی در سایت خود دارید ، فقط باید پرونده هایی را از پوشه های بارگیری شده به آنها اضافه کنید.
می توانید از نسخه کامل یا کوچک پرونده استفاده کنید:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 نحوه استفاده از نمادهای جذاب فونت
نمادها را می توان از دو طریق به یک صفحه وب اضافه کرد: با تنظیم کلاس های مناسب برای<i> وت<span> elements, یاby adding them to the desired element using the :before, :after pseudo-elements وتthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> لی: قبل از {محتوای: "\ f015" ؛/ * اضافه کردن نماد خانه */فونت-خانواده: fontawesome ؛ رنگ: #aaaaaa ؛ حاشیه راست: 10px ؛}1 نماد استاندارد
Font Awesome به گونه ای طراحی شده است که با عناصر درون خطی مورد استفاده قرار می گیرد. برای اضافه کردن نمادها ، ابتدا باید کلاس FA را روی آن قرار دهید<i> یا<span> عنصر.
برای اضافه کردن نماد انتخاب شده قبل یا بعد از عنصر ، یک خالی<i></i> یا<span></span> عنصر به عنصر اضافه می شود ، که به یک کلاس نماد اختصاص می یابد ، و همچنین یک کلاس اضافی که یک ظاهر طراحی شده را گسترش می دهد.
<i class="fa fa-camera-retro"></i>2 نماد بزرگ
برای افزایش اندازه یک نماد نسبت به ظرف آن ، از کلاسهای FA-LG (33 ٪ افزایش) ، FA-2X ، FA-3X ، FA-4X ، FA-5X استفاده کنید.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 نماد عرض ثابت
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation یاlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> خانه</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> کتابخانه</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> برنامه های کاربردی</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> تنظیمات</a ></li></ul>4 آیکون برای لیست گلوله
از کلاسهای FA-ul و FA-LI برای جایگزینی گلوله های پیش فرض در a استفاده کنید<ul>…</ul> لیست گلوله ای.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>مورد لیست</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>مورد لیست</li> <li><i class="fa-li fa fa-square"></i>مورد لیست</li></ul>5 آیکون و نقل قول قاب
Use the fa-border class to set the border for the icon. The pull-right وتpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum dolor Sit Amet ، Consectetur adipising elit. Donec Nec Purus Congue ، Posuere Libero در ، Porta Sapien. در سخنرانی SED. Sed Lacus elit ، Semper Vitae Felis Id ، Sodales Congue Sapien.</p>6 نماد متحرک
کلاسهای FA-Spin ، Fa-Pulse ، FA-Refresh ، FA-Cog را اضافه کنید تا آیکون های نخ ریسی تنظیم شوند. انیمیشن در IE8 - IE9 پشتیبانی نمی شود.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 نماد تبدیل شده
برای چرخش یا تلنگر نمادها ، از کلاسهای FA-Rotate-* و Fa-Flip-* استفاده کنید.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 نماد ترکیبی
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, وتfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes وتcss code to insert using the content property
نمادها برای برنامه های وب FA -ADJUST - \ F042 ؛Fa -anchor - \ f13d ؛
fa -archive - \ f187 ؛
FA -ARROWS - \ F047 ؛
Fa -Asterisk - \ f069 ؛
faat - \ f1fa ؛
در مقیاس FA-BALANCE-\ F24E ؛
Fa -Ban - \ f05e ؛
FA -Bank - \ F19C ؛
FA -BARCODE - \ F02A ؛
FA-BATTERY- خالی-\ f244 ؛
FA-BATTERY-HALF-\ F242 ؛
FA-BATTERY-QUARTER-\ F243 ؛
FA-BATTERY-THREE-QUARTER-\ F241 ؛
FA-BATTERY-FULL-\ F240 ؛
FA -BED - \ F236 ؛
FA -BEER - \ F0FC ؛
Fa -Bell - \ f0f3 ؛
Fa-Bell-Slash-\ f1f6 ؛
Fa -binoculars - \ f1e5 ؛
FA-Birthday-Cake-\ f1fd ؛
fa -bolt - \ f0e7 ؛
Fa -Bomb - \ f1e2 ؛
FA -Book - \ F02D ؛
برای چرخش یا تلنگر نمادها ، از کلاسهای FA-Rotate-* و Fa-Flip-* استفاده کنید.
4 منبع مرتبط
علاوه بر مجموعه جذاب فونت ، می توانید از فونت های نماد دیگر نیز استفاده کنید.
فونتلو٪٪ fontello ٪٪ مجموعه بزرگی از فونت های مختلف نماد را دارد. می توانید نمادهایی را که دوست دارید انتخاب کرده و آنها را در رایانه خود بارگیری کنید.
نماد بنیاد.نماد بنیاد ٪٪ یکی دیگر از مجموعه های فونت نماد از توسعه دهندگان چارچوب بنیاد است. علاوه بر نمادهای استاندارد ، این سایت دارای نمادهای گرد ، نمادهای رسانه های اجتماعی و موارد دیگر است.
نمادهای موادنمادهای مادی نمادهای مسطح یکپارچه Google هستند که سهولت ادراک را نشان می دهند. نمادها برای نمایش زیبا در تمام سیستم عامل های مشترک و برای همه وضوح صفحه نمایش بهینه شده اند.
مجموعه فونت نماد شامل 750+ آیکون است. ساده ترین راه برای نصب یک مجموعه در وب سایت شما استفاده از نمادهایی مانند فونت های وب Google است. برای انجام این کار ، کد زیر در علامت صفحه گنجانده شده است:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">برای نمایش صحیح قلم در مرورگرها ، به عنصری که از فونت نماد استفاده می شود ، به کلاس Material-Icons داده می شود:
.material-نماد {فونت خانواده: "نمادهای مواد" ؛ فونت وزن: به سبک فونت عادی: اندازه فونت عادی: 24px ؛ / * اندازه نماد ترجیحی */ صفحه نمایش: Inline-Block ؛ عرض: 1EM ؛ ارتفاع: 1EM ؛ خط خط: 1 ؛ متن متن: هیچ کدام ؛ فاصله حروف: کلمه عادی نوشتن: عادی ؛ فضای سفید: NOWRAP ؛ جهت: ltr ؛ -WebKit-Font-Smoothing: Antialiased ؛ / * پشتیبانی شده توسط همه مرورگرهای WebKit */ متن ارائه: بهینه سازی قابلیت ؛ / * پشتیبانی سافاری و کروم */ -moz-OSX-Font-Smoothing: Grayscale ؛ /* پشتیبانی Firefox. */ تنظیمات Font-Feature: 'Liga' ؛ /* پشتیبانی IE. */}خود نمادها با استفاده از<I class=''material-نماد''>لیگاتور یا کد HTML نماد</i> به عنوان مثال برچسب:
<i class="material-نماد">Account_Balance_Wallet</i><i class="material-نماد"></i>این لیگاتور توسط همه مرورگرهای مدرن درک می شود ، یعنی از نسخه 10 شروع می شود. کد نماد به طور خودکار تولید می شود ، برای این کار شما باید روی تصویر نماد کلیک چپ کرده و ظاهر پیشنهادی را کپی کنید.
اندازه نماد
اندازه نماد is controlled by additional classes:
.material-نماد.md-18 {اندازه فونت: 18px ؛} /*<i class="material-نماد md-18"></i> */.material-نماد.md-24 {اندازه فونت: 24px ؛} /* برای<i class="material-نماد md-24"></i> */.material-نماد.md-36 {اندازه فونت: 36px ؛} /*<i class="material-نماد md-36"></i> */.material-نماد.md-48 {اندازه فونت: 48px ؛} /* برای<i class="material-نماد md-48"></i> */رنگ نماد
رنگ نمادها نیز با استفاده از کلاسهای اضافی تنظیم شده است:
.material-نماد.md-dark {رنگ: rgba (0 ، 0 ، 0 ، 0.54) ؛} /*<i class="material-نماد md-dark"></i> */.material-نماد.md-light {رنگ: RGBA (255 ، 255 ، 255 ، 1) ؛} /*<i class="material-نماد md-light"></i> */.material-نماد.md-dark.md-inactive {رنگ: RGBA (0 ، 0 ، 0 ، 0.26) ؛} /*<i class="material-نماد md-dark md-inactive"></i> * /.material-نماد.md-light.md-inactive {رنگ: RGBA (255 ، 255 ، 255 ، 0.3) ؛} /*<i class="material-نماد md-light md-inactive">صورت</i> */برای تنظیم یک رنگ سفارشی ، باید کلاس اضافه کنید که رنگ نماد را تعریف کند ، به عنوان مثال:
.material-نماد.indigo {رنگ: #1a237e ؛} /*<i class="material-نماد indigo"></i> */سوالات متداول
- فونت بسیار جذاب به زبان ساده چیست؟
- در اصل ، این قلم با نمادهایی است که می تواند به هر عنصر صفحه وب اضافه شود تا دید و طراحی آن را ارتقا بخشد. این مجموعه شامل چند صد آیکون مناسب برای هر کار و هدف است.اطلاعات بیشتر در مورد این لینک
میشل پینسون علاقه مندان به سفر و خالق محتوا است. وی با ادغام اشتیاق به آموزش و اکتشاف ، وی در به اشتراک گذاشتن دانش و الهام بخشیدن به دیگران از طریق فریب دادن محتوای آموزشی متعهد شد. با توانمندسازی افراد با تخصص جهانی و احساس سرگردانی ، جهان را به هم نزدیک می کند.
