วิธีกำหนดสไตล์สีไอคอนขนาดและเงาของไอคอนตัวอักษรที่น่ากลัว

ฉันจะจัดสไตล์สีขนาดและเงาของไอคอนจากไอคอนของตัวอักษรที่น่ากลัวได้อย่างไร

ตัวอย่างเช่นไซต์ของ Font Awesomeจะแสดงไอคอนบางส่วนเป็นสีขาวและบางส่วนเป็นสีแดง แต่จะไม่แสดงCSSวิธีการจัดรูปแบบให้กับพวกเขา ...

ระบุว่าเป็นแบบอักษรเพียงอย่างเดียวจากนั้นคุณควรสามารถจัดสไตล์เป็นแบบอักษรได้:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

คุณสามารถเพิ่มอินไลน์สไตล์:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

หากคุณใช้ Bootstrap ในเวลาเดียวกันคุณสามารถใช้:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

มิฉะนั้น:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

ดูเหมือนว่าไอคอนสี FontAwesome ตอบสนองต่อข้อความข้อมูลข้อผิดพลาด ฯลฯ

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

ไฟล์ inyour.css:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

ไฟล์ inyour.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

มีวิธีที่ง่ายมากในการเปลี่ยนสีของไอคอนตัวอักษรที่น่ากลัว

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

คุณสามารถเปลี่ยนรหัสฐานสิบหกได้ตามต้องการ หมายเหตุ: สีข้อความจะเปลี่ยนสีไอคอนเช่นกันยกเว้นstyle="color:#00cc6a"ในiแท็ก

ใช้ FA 4.4.0 เพิ่ม

.text-danger
    color: #d9534f

ไปที่เอกสาร css แล้วใช้

 <i class="fa fa-ban text-danger"></i>

เปลี่ยนสีเป็นสีแดง คุณสามารถตั้งค่าของคุณเองสำหรับสีใด ๆ

For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

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

ในตัวอย่างนี้บนเว็บไซต์ของพวกเขาและวิธีที่ฉันเขียนในตัวอย่างของฉันเช่นกันเวอร์ชันล่าสุดของ Font Awesome ได้เปลี่ยนไวยากรณ์เล็กน้อยในการปรับขนาดก่อนที่มันจะเป็น:

icon-xxlarge

ตอนนี้ฉันต้องใช้ที่ไหน:

icon-3x

แน่นอนทั้งหมดนี้ขึ้นอยู่กับรุ่นของ Font Awesome ที่คุณติดตั้งในสภาพแวดล้อมของคุณ หวังว่านี่จะช่วยได้

ใน FontAwesome 4.0 คลาสจะเปลี่ยนเป็น 'fa-2x', 'fa-3x'

เพียงคุณสามารถกำหนดชั้นเรียนในไฟล์ css ของคุณและเรียงซ้อนลงในไฟล์ html เช่น

<i class="fa fa-plus fa-lg green"></i> 

ตอนนี้เขียนลงใน CSS

.green{ color:green}

เพียงกำหนดเป้าหมายชื่อคลาสที่กำหนดไว้ล่วงหน้าที่ยอดเยี่ยมแบบอักษร

ในอดีต:

HTML

<i class="fa fa-facebook"></i> 

CSS

i.fa {
    color: red;
    font-size: 30px;
}

โปรดดูที่ลิงก์ http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

ฉันมีปัญหาเดียวกันเมื่อฉันพยายามใช้ไอคอนโดยตรงจาก BootstrapCDN (วิธีที่ง่ายที่สุด) จากนั้นฉันดาวน์โหลดไฟล์ CSS และคัดลอกไปยังโฟลเดอร์ CSS ของเว็บไซต์ของฉันเป็นไฟล์ CSS (อธิบายภายใต้ 'วิธีที่ง่าย' ในเอกสารประกอบแบบอักษรที่ยอดเยี่ยม) และทุกอย่างก็เริ่มทำงานตามที่ควร

เครดิต: ฉันสามารถเปลี่ยนสีของไอคอนสี Font Awesome ได้หรือไม่

(คำตอบนี้สร้างจากคำตอบนั้น)

(สำหรับไอคอนบุ๊กมาร์กตัวอย่างเช่น :)

ไฟล์ inyour.css:

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

ไฟล์ inyour.html:

<div class="icon-bookmark icon-white"></div>

ล้อมรอบแท็ก i ใน p หรือ span จากนั้นคุณสามารถใช้ bootstrap css class

<p class="text-success"><i class="fa fa-check"></i></p>

สำหรับรุ่นFont Awesome 5 SVGให้ใช้

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

ตามที่ได้อธิบายไว้แล้วไอคอนตัวอักษรที่ยอดเยี่ยมเป็นข้อความดังนั้นคุณจึงจัดรูปแบบโดยใช้แอตทริบิวต์ CSS ที่เหมาะสม ตัวอย่างเช่น:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

ถ้าอย่างที่มันเกิดขึ้นกับฉันขนาดไอคอนจะไม่เปลี่ยนแปลงเลยเพิ่ม "! สำคัญ" ในแอตทริบิวต์ขนาดตัวอักษร

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

สำหรับการปรับขนาดไอคอน

ทั้งเฟรมเวิร์กเว็บแบบอักษร + CSS และ SVG + JS รวมถึงการควบคุมพื้นฐานบางอย่างสำหรับการปรับขนาดไอคอนในบริบทของ UI ของหน้าเว็บของคุณ

คุณสามารถใช้เช่น

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

เปลี่ยนคุณสมบัติ css ของ .fa-xxx แบบไดนามิก:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

ฉันจะไม่แนะนำให้คุณใช้รูปแบบตัวอักษรที่ยอดเยี่ยมเช่น FA-5x ฯลฯ เพราะกลัวว่าพวกเขาจะเปลี่ยนมันและคุณจะต้องเก็บรหัสแอปพลิเคชันของคุณให้ตรงกับมาตรฐานล่าสุด คุณเพียงแค่หลีกเลี่ยงสิ่งนี้โดยให้แต่ละคลาสที่ยอดเยี่ยมแบบอักษรที่คุณต้องการสไตล์ที่เหมือนกันในชั้นเรียนเดียวกันพูดว่า:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

นี่คือชั้นเรียนคือ fa-sabi-social-icons

จากนั้นใน css ของคุณคุณสามารถจัดสไตล์ฟอนต์โดยใช้กฎ css เดียวกันกับที่คุณใช้สไตล์ฟอนต์ปกติด้วย เช่น

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

ที่ควรได้รับแบบอักษรที่ยอดเยี่ยมแบบอักษรของคุณ