میزبانی وب هاست

میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 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">

۱	<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>

۱	<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>

در قسمت Class یک عبارت fa-lg وجود دارد که میزان بزرگی شکلک را بیان می کند که می توانید fa-2x یا fa-3x و .... استفاده کنید.

۳ ) آموزش ایجاد دکمه های تحت وب توسط Awesome Font

css3-buttons-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: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.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: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}

.button:focus {
    outline: 0;
    background: #fafafa;
}    

.button:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;        
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;        
}

/* Hexadecimal entities for the icons */

.add:before {
    content: "\271A";
}

.edit:before {
    content: "\270E";        
}

.delete:before {
    content: "\2718";        
}

.save:before {
    content: "\2714";        
}

.email:before {
    content: "\2709";        
}

.like:before {
    content: "\2764";        
}

.next:before {
    content: "\279C";
}

.star:before {
    content: "\2605";
}

.spark:before {
    content: "\2737";
}

.play:before {
    content: "\25B6";
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

.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>

۱	<a href="" class="button add">Add</a>

اگر توجه کنید یک ویژگی به نام content در کد css بالا داده شده است.که نام Base64 این شکلک ها اورده شده . که شما با قرار دادن نام آن بجای add در کد بالا می توایند استفاده کنید.

پایان

تاریخ و زمان انتشار : ۶ اسفند, ۱۳۹۲

مرتبط با موضوع :

آدرس : مازندران - فریدونکنار - میدان درنا - خیابان جمکران (خط سوته)

تلفن تماس : ۹۲۳۸ ۳۵۶۶ ۰۱۱[ ساعات اداری : شنبه تا چهارشنبه | 9 صبح تا 4 بعد از ظهر ]

پست الکترونیک :info [at] Mazandaranweb.ir

بانک ملی ایران

شماره حساب : 0216867544008
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته

دوره ی های آموزشی طراحی وب سایت در مازندران

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

طراحی وب سایت ریسپانسیو واکنش گرا responsive با فریم ورک بوت استرپ