ใช้ไอคอนตัวอักษรที่น่ากลัวใน CSS

ฉันมี CSS ที่มีลักษณะเช่นนี้:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

ผมอยากจะเปลี่ยนภาพที่มีไอคอนจากตัวอักษรที่น่ากลัว

ฉันไม่เห็นว่าจะใช้ไอคอนใน CSS เป็นภาพพื้นหลัง เป็นไปได้ไหมถ้าสมมติว่ามีการโหลดสไตล์ / แบบอักษรของ Awesome Awesome ก่อน CSS ของฉัน

คุณไม่สามารถใช้ข้อความเป็นภาพพื้นหลังได้ แต่คุณสามารถใช้คลาส:beforeหรือ:afterหลอกเพื่อวางอักขระข้อความตามที่คุณต้องการโดยไม่ต้องเพิ่มมาร์คอัปที่ยุ่งเหยิงทุกชนิด

ให้แน่ใจว่าได้ตั้งค่าposition:relativeบน wrapper ข้อความจริงของคุณเพื่อให้การวางตำแหน่งทำงาน

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

แก้ไข:

Font Awesome v5 ใช้ชื่อแบบอักษรอื่นที่ไม่ใช่รุ่นที่เก่ากว่า:

• สำหรับ FontAwesome v5 เวอร์ชันฟรีให้ใช้: font-family: "Font Awesome 5 Free"
• สำหรับ FontAwesome v5, รุ่น Pro ให้ใช้: font-family: "Font Awesome 5 Pro"

โปรดทราบว่าคุณควรตั้งค่าคุณสมบัติแบบอักษรน้ำหนักเดียวกันด้วย (ดูเหมือนจะเป็น 900)

อีกวิธีในการค้นหาชื่อแบบอักษรคือคลิกขวาที่ไอคอนตัวอักษรตัวอย่างที่ดีเลิศบนหน้าของคุณและรับชื่อแบบอักษร (เช่นเดียวกับที่พบไอคอนรหัส utf-8 แต่โปรดทราบว่าคุณสามารถค้นหาได้:before)

นอกเหนือจากคำตอบจาก Diodeus ด้านบนคุณต้องมีfont-family: FontAwesomeกฎ (สมมติว่าคุณมี@font-faceกฎสำหรับ FontAwesome ที่ประกาศไว้แล้วใน CSS ของคุณ) จากนั้นเป็นเรื่องของการรู้ว่าค่าเนื้อหา CSS สอดคล้องกับไอคอนใด

ฉันได้แสดงรายการไว้ที่นี่: http://astronautweb.co/snippet/font-awesome/

จริงๆแล้วfont-awesomeCSS มีกลยุทธ์คล้ายกันสำหรับการตั้งค่าสไตล์ไอคอน ถ้าคุณต้องการที่จะได้รับถืออย่างรวดเร็วของicon รหัสตรวจสอบnon-minified font-awesome.cssไฟล์และมีพวกเขาเป็น .... ตัวอักษรในแต่ละความบริสุทธิ์ของตน

รวมทุกอย่างข้างต้นต่อไปนี้เป็นชั้นสุดท้ายที่ทำงานได้ดี

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

คุณสามารถลองคลาสตัวอย่างนี้ และค้นหาเนื้อหาไอคอนที่นี่: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

หากต้องการใช้แบบอักษรที่ยอดเยี่ยมโดยใช้ CSS ทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1 - เพิ่มแบบอักษรของ FontAwesome ใน CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

ขั้นตอน - 2 ใช้ css ด้านล่างเพื่อใช้แบบอักษรกับองค์ประกอบของ HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

และสุดท้ายใช้คลาส " sorting_asc " เพื่อใช้ css กับแท็ก / องค์ประกอบ HTML ที่ต้องการ

ไม่จำเป็นต้องฝังเนื้อหาลงใน CSS คุณสามารถใส่เนื้อหาตราไว้ในองค์ประกอบ fa แล้วปรับ css ตรา http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

หรือหากใช้ Sass คุณสามารถ "ขยาย" ไอคอน FA เพื่อแสดง:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

ลิงค์ตัวอย่าง: https://codepen.io/bungeedesign/pen/XqeLQg

รับรหัสไอคอนจาก: https://fontawesome.com/cheatsheet?from=io

สำหรับสิ่งนี้คุณเพียงแค่ต้องเพิ่มแอcontentททริบิวต์และแอfont-familyททริบิวต์ให้กับองค์ประกอบที่ต้องการผ่าน: before หรือ: after

ตัวอย่างเช่นฉันต้องการแนบไอคอนไฟล์แนบหลังจากaองค์ประกอบทั้งหมดในโพสต์ของฉัน ดังนั้นก่อนอื่นฉันต้องค้นหาว่าไอคอนดังกล่าวมีอยู่ใน fontawesome หรือไม่ เช่นเดียวกับในกรณีที่ผมพบว่ามันนี่fa fa-paperclipคือ แล้วฉันจะคลิกขวาที่ไอคอนที่นั่นและไป::beforeคุณสมบัติหลอกดึงข้อมูลออกแท็กจะใช้ซึ่งในกรณีของฉันฉันพบว่าเป็นcontent \f0c6จากนั้นฉันจะใช้สิ่งนั้นใน css ของฉันเช่นนี้:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

ใช้โปรแกรม Python ต่อไปนี้ผ่านทางบรรทัดคำสั่งเพื่อสร้างภาพ png จากไอคอน Font-Awesome:

https://github.com/Pythonity/font-awesome-to-png