با سلام
استاد عزیز با تشکر از دوره عالیتون
میخواستم بپرسم درمورد استایل دادن به icon ها مثلا awesome که خودش یک کلاسه و مثلا در تک li وجود داره چطور میشه عمل کرد
اگر استایل اینلاین و حتی از طریق آی دی هم اقدام کنیم کل li استایل میگیره
چطور میشه مثلا در طراحی یک منوطور ی استایل داد که فقط آیکون استایل بگیره و نوشته داخل li تغییر نکنه
با سلام خدمت شما همراه گرامی
سلامت باشید
به همون تگ i استایل رو بدید فقط روی ایکون اعمال میشه
استاد احتمالا من متوجه نشدم
وقتی به li استایل میدیم نوشته تک a درون li هم همون استایل رو میگیره
البته استایل های li که تعریف شدن روی icon هیچ تاثیری نداره
<li class="fa fa-home"> <a href="#">HOME</a></li>
نه ببینید آیکون رو به تگ li ندید
یک تگ i درست کنید داخلش به اون بدید و بعد به اون تگ i استایل بدید
لینک زیر کمکتون میکنه
https://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons
با تشکر از پاسخگوئی سریعتون
روش ذکر شده درست بود و به راحتی استایل به صورت مجزا اعمال شد
اما متاسفانه مشکل جدیدی وجود داره
لینک و آیکون از هم جدا شدند و وقتی ماوس روی منو هاور میشه آیکون و تایتل منو دو بخش جدا از هم هستند که ماوس مشخصه
یعنی وقتی موس روی منو میره ایکون و نوشته با یک موس انتخاب نمیشه
اولین گزینه منو بدون تگ i و درون تک a و li قرار داره که به صورت یکدست انتخاب میشه
دومین گزینه منو داخل تگ i
HTML
<div>
<ul>
<li > <a class="fa fa-home" href="#"> HOME</a></li>
<li> <i class="fa fa-cog"></i><a href="#"> FLYOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">MEGA MENU</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">IMAGES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS
ul {
background-color: #23354b;
list-style-type: none;
text-align: left;
margin: 0;
padding: 20px;
}
li {
display: inline;
text-align: right;
font-size: 20px;
padding: 15px;
border-right: 1px dotted white;
}
a {
text-decoration: none;
color: #cccccc;
}
a:hover {
color: white;
}
li:hover {
background-color: #009fe1;
padding: 10px;
}
i {
color: #cccccc;
font-size: 0;
}
i:hover{
color: white;
}
باید تگ i رو داخل a قرار بدید
<a href="#"> <i class="fa fa-cog"></i>FLYOUT</a>
مخصوص اعضای ویژه 
