ฉันสามารถเปลี่ยนสีของไอคอนสีของตัวอักษรที่น่ากลัวได้หรือไม่

ฉันต้องปิดไอคอนภายใน<a>แท็กด้วยเหตุผลบางอย่าง
มีวิธีที่เป็นไปได้ในการเปลี่ยนสีของไอคอนแบบอักษรที่ยอดเยี่ยมเป็นสีดำหรือไม่?
หรือมันเป็นไปไม่ได้ตราบใดที่มันห่ออยู่ภายใน<a>แท็ก? ตัวอักษรยอดเยี่ยมควรเป็นแบบอักษรไม่ใช่ภาพใช่ไหม

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

สิ่งนี้ใช้ได้กับฉัน:

.icon-cog {
  color: black;
}

สำหรับเวอร์ชั่นของ Font Awesome ด้านบน4.7.0จะมีลักษณะดังนี้:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

คุณสามารถเพิ่มคลาสพิเศษลงในไอคอนปุ่ม ...

คุณสามารถระบุสีในแอตทริบิวต์ style:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

ในการเปลี่ยนสีไอคอนตัวอักษรที่ยอดเยี่ยมสำหรับโครงการทั้งหมดของคุณให้ใช้สิ่งนี้ใน css ของคุณ

.fa {
  color : red;
}

ลองสิ่งนี้:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

หากคุณไม่ต้องการแก้ไขไฟล์ CSS สิ่งนี้จะเป็นประโยชน์สำหรับฉัน ใน HTML เพิ่มสไตล์ด้วยสี:

<i class="fa fa-cog" style="color:#fff;"></i>

หากต้องการกดเฉพาะไอคอนฟันเฟืองในปุ่มชนิดนั้นคุณสามารถให้คลาสเป็นปุ่มและตั้งค่าสีสำหรับไอคอนได้เฉพาะเมื่ออยู่ภายในปุ่ม

HTML:

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS:

.my-nice-button>i { color: black; }

สิ่งนี้จะทำให้ไอคอนใด ๆ ที่เป็นสายเลือดโดยตรงของปุ่มของคุณเป็นสีดำ

ด้วยการอ้างอิงถึง @ClarkeyBoy คำตอบรหัสด้านล่างใช้งานได้ดีหากใช้Font-Awesomeไอคอนเวอร์ชันล่าสุดหรือหากคุณใช้faคลาส

.fa.icon-white {
    color: white;
}

และจากนั้นเพิ่มicon-whiteไปยังคลาสที่มีอยู่

.fa-search{
    color:#fff;
 }

คุณเขียนโค้ดนั้นใน css และมันจะเปลี่ยนสีเป็นสีขาวหรือสีใด ๆ ที่คุณต้องการคุณระบุมัน

เพียงแค่ให้และจัดรูปแบบข้อความตามที่คุณต้องการ: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>

เพียงแค่ให้มันสไตล์สิ่งที่คุณต้องการ

style="color: white;font-size: 20px;"

คุณสามารถเปลี่ยนสีของไอคอน fontawesome โดยการเปลี่ยนสีพื้นของมันโดยใช้สถานที่ให้บริการcss color ตัวอย่างต่อไปนี้:

<i class="fa fa-cog" style="color:white">

นี้รองรับ svgs ด้วย

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>

เขียนรหัสนี้ในบรรทัดเดียวกันเปลี่ยนสีไอคอน:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

หากคุณต้องการเปลี่ยนสีของไอคอนเฉพาะคุณสามารถใช้สิ่งนี้:

.fa-stop {
    color:red;
}

คุณสามารถเปลี่ยนสีไอคอนของ Font Awesome ด้วยคลาส bootstrap

ใช้

text-color

ตัวอย่าง

text-white

สำหรับฉันสิ่งเดียวที่ทำงานคือ inline css + การแทนที่

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

การใช้คลาสจะให้คุณสมบัติการผูกฟรีซึ่งคุณสามารถใช้กับแท็กที่คุณต้องการ