میزبانی وب هاست
میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته
میزبانی وبثبت دامنه
ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....
ثبت دامنهطراحی وب سایت
طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)
طراحی وبآموزش طراحی وب
برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی
آموزش طراحی وبآموزش ایجاد دکمه ی های Css3 تحت وب با Font Awesome icon
یکی از بارز ترین نشانه های طراحی یک سایت قدرتمند داشتن سرعت بارگزاری و لود بالای صفحه است بطوریکه حتی افرادی که دارای اینترنت کم سرعت در جهان هستند در کمتر از ۱۰ ثانیه وب سایت شما را بطور کامل ببینند یکی از فاکتورهایی که در این زمینه به شما در طراحی وب سایت تان کمک کنید استفاده نکردن از فایل های تصویری با پسوند .png و یا .gif و …. می باشد.اگر هم نیازمند به استفاده آن شدید بهتر است از تکنولوژی Css Sprit استفاده کنید یعنی تمامی تصاویر را در یک فایل ذخیره کنید و سپس بوسیله ی Css و ویژگی Backgroun-position آنها را بارگزاری کنید.
تقریبا در تمامی وب سایت ها از آرم ها و نشانه هایی در قسمت های مختلف سایت مثل منوی اصلی یا تماس با ما و یا عضویت در خبرنامه و Rss استفاده می شود که برنامه نویسان برای هر قسمت یک فایل تصویری png لود می کنند اما امروزه بوسیله ی Awesome Font دیگر نیازی به لود این تصاویر نیست.
۱ ) Awesome Font چیست ؟
در طراحی Awesome طراحان بوسیه ی ایده ای خلاقانه مجموعه ای از تصاویر ، نشانه ها و آیکون ها رابه صورت یک فایل فونت درآوردند که برنامه نویسان تنها با بارگزاری فایل Css آن می توانند در اندازه ی مختلف از این شکلک ها استفاده کنند طبق تعریفی که در وب سایت اصلی Awesome شده است بیان کرده The iconic font designed for Bootstrap یعنی مجموعه ای از آیکون ها برای فریم ورک Bootstrap اما این بدین معنا نمی باشد که افرادی که از فریم ورک بوت استرپ استفاده می کنند توانایی استفاده از awesome را ندارد.برای دریافت Awesome فونت می توانید به آدرس Github آن مراجعه کنید :
دانلود آخرین ورژن Awesome font
نمایش تمامی آیکون های موجود در Awesomr font به همراه Class آنها جهت استفاده در وب
۲) آموزش استفاده از Awesome font در صفحات وب
ابتدا باید فایل Css مربوط به این فونت را در بخش head وب سایت خود لود کنید که کد آن :
۱ |
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> |
همان طور که در صفحه لیست آیکون ها مشاهده می کنید جلوی هر آیکون Class مربوط به آن آمده است که شما می توایند در هر کجای سایت از آن استفاده کنید مثلا برای نمایش تیک صحیح از استایل fa-check استفاده می شود بدین ترتیب شما می توانید در بخش های مختلف سایت از آن استفاده کنید به عنوان مثال :
۱ |
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> |
در قسمت Class یک عبارت fa-lg وجود دارد که میزان بزرگی شکلک را بیان می کند که می توانید fa-2x
یا fa-3x و .... استفاده کنید.
۳ ) آموزش ایجاد دکمه های تحت وب توسط Awesome Font
برای ایجاد Css3 Button توسط font awesome ابتدا کد css زیر را در بخش head سایت خود کپی کنید :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ |
.button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: ۱px solid #۷۷۷; padding: ۰ ۱.۵em; margin: ۰.۵em; font: bold ۱em/2em Arial, Helvetica; text-decoration: none; color: #۳۳۳; text-shadow: ۰ ۱px ۰ rgba(۲۵۵,۲۵۵,۲۵۵,.۸); border-radius: .۲em; box-shadow: ۰ ۰ ۱px ۱px rgba(۲۵۵,۲۵۵,۲۵۵,.۸) inset, ۰ ۱px ۰ rgba(۰,۰,۰,.۳); } .button:hover { background-color: #ddd; background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { box-shadow: ۰ ۰ ۴px ۲px rgba(۰,۰,۰,.۳) inset; position: relative; top: ۱px; } .button:focus { outline: ۰; background: #fafafa; } .button:before { background: #ccc; background: rgba(۰,۰,۰,.۱); float: left; width: ۱em; text-align: center; font-size: ۱.۵em; margin: ۰ ۱em ۰ -۱em; padding: ۰ .۲em; box-shadow: ۱px ۰ ۰ rgba(۰,۰,۰,.۵), ۲px ۰ ۰ rgba(۲۵۵,۲۵۵,۲۵۵,.۵); border-radius: .۱۵em ۰ ۰ .۱۵em; pointer-events: none; } /* Hexadecimal entities for the icons */ .add:before { content: "\۲۷۱A"; } .edit:before { content: "\۲۷۰E"; } .delete:before { content: "\۲۷۱۸"; } .save:before { content: "\۲۷۱۴"; } .email:before { content: "\۲۷۰۹"; } .like:before { content: "\۲۷۶۴"; } .next:before { content: "\۲۷۹C"; } .star:before { content: "\۲۶۰۵"; } .spark:before { content: "\۲۷۳۷"; } .play:before { content: "\۲۵B6"; } |
حال می توانید توسط کد html زیر از دکمه ها استفاده کنید :
۱ |
<a href="" class="button add">Add</a> |
اگر توجه کنید یک ویژگی به نام content در کد css بالا داده شده است.که نام Base64 این شکلک ها اورده شده . که شما با قرار دادن نام آن بجای add در کد بالا می توایند استفاده کنید.
پایان

بانک ملی ایران
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته
دوره ی های آموزشی طراحی وب سایت در مازندران
جهت اطلاعات بیشتر اینجا کلیک کنید ...