การเขียนโปรแกรม font-awesome

11

ฉันมี CSS ที่มีลักษณะเช่นนี้: #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } ผมอยากจะเปลี่ยนภาพที่มีไอคอนจากตัวอักษรที่น่ากลัว ฉันไม่เห็นว่าจะใช้ไอคอนใน CSS เป็นภาพพื้นหลัง เป็นไปได้ไหมถ้าสมมติว่ามีการโหลดสไตล์ / แบบอักษรของ Awesome Awesome ก่อน CSS ของฉัน

305 css font-awesome

9

ใช้ไอคอน Font Awesome เป็นเนื้อหา CSS

ฉันต้องการใช้ไอคอน Font Awesome เป็นเนื้อหา CSS เช่น a:before { content: "<i class='fa...'>...</i>"; } ฉันรู้ว่าฉันไม่สามารถใช้รหัส HTML contentได้ดังนั้นจึงเหลือเฉพาะภาพเท่านั้น

279 html css font-awesome

17

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

ฉันต้องปิดไอคอนภายใน<a>แท็กด้วยเหตุผลบางอย่าง มีวิธีที่เป็นไปได้ในการเปลี่ยนสีของไอคอนแบบอักษรที่ยอดเยี่ยมเป็นสีดำหรือไม่? หรือมันเป็นไปไม่ได้ตราบใดที่มันห่ออยู่ภายใน<a>แท็ก? ตัวอักษรยอดเยี่ยมควรเป็นแบบอักษรไม่ใช่ภาพใช่ไหม <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html css font-awesome

14

วิธีจัดกึ่งกลางข้อความในแนวตั้งด้วยไอคอนขนาดใหญ่ที่น่ากลัวแบบอักษร?

ให้บอกว่าฉันมีปุ่มบูตที่มีไอคอนตัวอักษรที่ยอดเยี่ยมและข้อความบางส่วน: <div> <i class='icon icon-2x icon-camera'></i> hello world </div> ฉันจะทำให้ข้อความปรากฏกึ่งกลางในแนวตั้งได้อย่างไร ข้อความอยู่ในแนวเดียวกับขอบด้านล่างของไอคอนทันที: http://jsfiddle.net/V7DLm/1/ แก้ไข: ฉันมีทางออกที่เป็นไปได้: http://jsfiddle.net/CLdeG/1/แต่มันให้ความรู้สึกค่อนข้างยุ่งเหยิง - แนะนำแท็ก p เพิ่มเติมใช้การดึงซ้ายและแสดง: ตาราง บางทีใครบางคนสามารถแนะนำวิธีที่ง่ายขึ้น

231 html css font-awesome

30

แบบอักษรดีเลิศไม่ทำงานไอคอนแสดงเป็นสี่เหลี่ยม

ดังนั้นฉันจึงพยายามสร้างต้นแบบหน้าการตลาดและฉันใช้ Bootstrap และไฟล์ Font Awesome ใหม่ ปัญหาคือเมื่อฉันพยายามใช้ไอคอนทุกอย่างที่แสดงบนหน้าจะเป็นสี่เหลี่ยมจัตุรัสขนาดใหญ่ นี่คือวิธีที่ฉันรวมไฟล์ไว้ในหัว: <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css">  </head> และนี่คือตัวอย่างของฉันที่พยายามใช้ไอคอน: <i class="icon-camera-retro"></i> แต่ทั้งหมดที่ได้รับการแสดงผลในสี่เหลี่ยมขนาดใหญ่ ไม่มีใครรู้ว่าเกิดอะไรขึ้น?

224 css html twitter-bootstrap font-awesome

7

แบบอักษรยอดเยี่ยมประเภทอินพุต 'ส่ง'

ดูเหมือนจะไม่มีคลาสสำหรับประเภทการป้อนข้อมูล 'ส่ง' ในฟอนต์ที่ยอดเยี่ยม เป็นไปได้ไหมที่จะใช้บางคลาสจากฟอนท์ยอดเยี่ยมสำหรับการป้อนปุ่ม? ฉันได้เพิ่มไอคอนให้กับปุ่มทั้งหมด (ซึ่งเชื่อมโยงกับคลาส 'btn' จาก twitter-bootstrap) ในแอปพลิเคชันของฉัน แต่ไม่สามารถเพิ่มไอคอนใน 'ประเภทอินพุตส่ง' หรือวิธีใช้รหัสนี้: input#image-button{ background: #ccc url('icon.png') no-repeat top left; padding-left: 16px; height: 16px; } HTML: <input type="submit" id="image-button">Text</input> (ซึ่งฉันได้รับจากHTML: จะสร้างปุ่มส่งพร้อมข้อความ + รูปภาพได้อย่างไร ) ด้วยตัวอักษรที่ยอดเยี่ยม?

205 twitter-bootstrap twitter-bootstrap-rails font-awesome

7

วิธีเพิ่มไอคอนสปินเนอร์ไปที่ปุ่มเมื่ออยู่ในสถานะกำลังโหลด

ปุ่มของ Twitter BootstrapมีLoading...สถานะที่ดี สิ่งนั้นคือมันเพิ่งแสดงข้อความเช่นLoading...ส่งผ่านdata-loading-textคุณลักษณะเช่นนี้: <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> เมื่อมองไปที่ Font Awesome คุณจะเห็นว่าตอนนี้มีไอคอนสปินเนอร์เคลื่อนไหวแล้ว ฉันพยายามรวมไอคอนสปินเนอร์นั้นเมื่อทำการUploadดำเนินการเช่นนี้: $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); แต่สิ่งนี้ไม่มีผลเลยนั่นคือฉันเพิ่งเห็นUploading...ข้อความบนปุ่ม เป็นไปได้หรือไม่ที่จะเพิ่มไอคอนเมื่อปุ่มอยู่ในสถานะกำลังโหลด? ดูเหมือน Bootstrap อย่างใดเพียงแค่เอาไอคอน<i class="icon-upload icon-large"></i>ภายในปุ่มในขณะที่อยู่ในสถานะโหลด นี่คือง่ายๆสาธิตที่แสดงให้เห็นถึงพฤติกรรมที่ผมอธิบายข้างต้น อย่างที่คุณเห็นเมื่อมันเข้าสู่สถานะการโหลดไอคอนจะหายไป มันจะปรากฏขึ้นอีกครั้งหลังจากช่วงเวลา

191 button twitter-bootstrap icons loading font-awesome

6

ลิสต์แบบกำหนดเอง li พร้อมไอคอนแบบอักษรสุดยอด

ฉันสงสัยว่ามันเป็นไปได้ที่จะใช้คลาส font-awesome (หรือแบบอักษร iconic อื่น ๆ ) เพื่อสร้าง<li>list-style-type แบบกำหนดเองหรือไม่? ฉันกำลังใช้ jQuery เพื่อทำสิ่งนี้เช่น: $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); อย่างไรก็ตามสิ่งนี้ไม่ได้มีรูปแบบที่เหมาะสมเมื่อ<li>ข้อความล้อมรอบหน้าเว็บเนื่องจากถือว่าไอคอนเป็นส่วนหนึ่งของข้อความไม่ใช่ตัวแสดงหัวข้อย่อยที่แท้จริง เคล็ดลับใด ๆ

156 css html-lists font-awesome

15

วิธีใช้ไอคอนและสัญลักษณ์จาก“ Font Awesome” บนแอปพลิเคชัน Android พื้นเมือง

ฉันพยายามใช้Font Awesomeในแอปพลิเคชันของฉันฉันสามารถรวมแบบอักษรโดยใช้Typeface.createFromAsset()แต่ฉันยังต้องการใช้ไอคอนที่จัดทำโดยแบบอักษรนี้ แต่จนถึงตอนนี้ฉันยังไม่สามารถทำเช่นนั้นได้ แบบอักษรนี้ประกอบด้วยไอคอนภายในพื้นที่ใช้งานส่วนตัวของ Unicode (PUA) สำหรับสิ่งต่าง ๆ เช่นตัวควบคุมเครื่องเล่นสื่อการเข้าถึงระบบไฟล์ลูกศรเป็นต้น มีใครใช้แบบอักษรที่มีไอคอนและสัญลักษณ์บน Android เป็นไปได้ไหม?

153 android font-awesome

8

เพิ่มไอคอนที่กำหนดเองเพื่อตัวอักษรที่ยอดเยี่ยม

ฉันชอบแบบอักษรไอคอนตัวอักษรที่ยอดเยี่ยมและต้องการใช้สำหรับไอคอนส่วนใหญ่ในเว็บไซต์ของฉัน แต่มีไอคอน svg ที่กำหนดเองไม่กี่ตัวที่ฉันต้องการนอกเหนือไปจากสิ่งที่มีให้ ฉันสังเกตว่าFont. รุ่น SVVGนั้นประกอบไปด้วย<glyph />องค์ประกอบเหล่านี้เป็นส่วนใหญ่: ... <glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 …

138 svg webfonts font-awesome

22

ไอคอนตัวอักษรที่น่ากลัวภายในองค์ประกอบการป้อนข้อความ

ฉันพยายามแทรกไอคอนผู้ใช้ในช่องป้อนชื่อผู้ใช้ ฉันได้ลองวิธีแก้ปัญหาจากคำถามที่คล้ายกันโดย ทราบว่าbackground-imageคุณสมบัติไม่ทำงานเนื่องจากFont Awesomeเป็นแบบอักษร ต่อไปนี้เป็นวิธีการของฉันและฉันไม่สามารถแสดงไอคอนได้ .wrapper input[type="text"] { position: relative; } .wrapper input[type="text"]:before { font-family: 'FontAwesome'; position: absolute; top: 0px; left: -5px; content: "\f007"; } ฉันมีแบบอักษรหน้าประกาศในแบบอักษรเริ่มต้น css ที่น่ากลัวดังนั้นฉันไม่แน่ใจว่าถ้าเพิ่มแบบอักษรตระกูลด้านบนเป็นวิธีที่เหมาะสม @font-face { font-family: 'FontAwesome'; src: url('../Font/fontawesome-webfont.eot?v=3.2.1'); src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); }

136 html css fonts font-awesome

14

สร้างไอคอน Font Awesome เป็นวงกลม?

ฉันใช้ฟอนต์ที่ยอดเยี่ยมในบางโปรเจ็กต์ แต่ฉันมีบางอย่างที่อยากทำกับฟอนต์ไอคอนน่ากลัวฉันสามารถเรียกไอคอนแบบนี้ได้อย่างง่ายดาย: <i class="fa fa-lock"></i> เป็นไปได้ไหมที่ไอคอนทั้งหมดจะอยู่ในวงกลมกลมที่มีเส้นขอบ? สิ่งนี้ฉันมีภาพ: การใช้ i { background-color: white; border-radius: 50%; border: 1x solid grey; padding: 10px; } จะทำเอฟเฟกต์ แต่ปัญหาคือไอคอนมักจะใหญ่กว่าที่ข้อความหรือองค์ประกอบข้างๆมีวิธีแก้ไขอย่างไร?

134 css font-awesome

7

การใช้ไอคอนตัวอักษรที่ยอดเยี่ยมสำหรับสัญลักษณ์แสดงหัวข้อย่อยที่มีองค์ประกอบรายการเดียว

เราต้องการที่จะใช้ไอคอนFont Awesome ( http://fortawesome.github.com/Font-Awesome/ ) เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการที่ไม่มีการเรียงลำดับใน CMS เท็กซ์เอดิเตอร์บน CMS จะเอาต์พุต HTML แบบ raw เท่านั้นดังนั้นอิลิเมนต์ / คลาสเพิ่มเติมไม่สามารถเพิ่มได้ นี่หมายถึงการแสดงไอคอนเมื่อมาร์คอัพมีลักษณะดังนี้: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ปัญหาแรกที่ฉันสามารถดูได้ว่า Font Awesome ต้องการแอตทริบิวต์ font-family ที่แตกต่างกันหรือไม่ซึ่งจะต้องใช้องค์ประกอบแยกต่างหาก เป็นไปได้โดยใช้ CSS บริสุทธิ์หรือไม่ หรือฉันจะต้องผนวกองค์ประกอบไปที่จุดเริ่มต้นของแต่ละรายการโดยใช้บางสิ่งบางอย่างเช่น jQuery ฉันรู้ว่าเราสามารถใช้แบ็คกราวด์แบ็คกราวด์ได้ แต่จะดีมากถ้าใช้ Font Awesome หากเป็นไปได้

131 css font-awesome

23

ไอคอน FontAwesome ไม่แสดง ทำไม?

เมื่อเร็ว ๆ นี้ฉันได้พัฒนาเว็บไซต์นี้และฉันกำลังพยายามใส่ไอคอนแบบอักษรที่ยอดเยี่ยมลงไปดังนั้นจึงสามารถปรับขนาดได้ สิ่งนี้คือพวกเขาไม่ปรากฏตัว ดู HTML: <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a> หรือ <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li> ฉันใส่การอ้างอิงสไตล์ชีทไว้ในหัว ฉันไม่รู้ว่าทำไมพวกเขาถึงไม่ปรากฏตัว นี่คือข้อมูลอ้างอิง: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> ได้เลยนี่คือ html แบบเต็ม: <head> <meta charset="UTF-8"> <title>Retrica</title> <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="style/normalize.css" rel="stylesheet" type="text/css"> <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css"> </head> …

124 html css font-awesome

10

วิธีใช้ไอคอนแบบอักษรที่ยอดเยี่ยมจากโมดูลโหนด

ฉันได้ติดตั้งไอคอนฟอนต์ 4.0.3 ที่ยอดเยี่ยมโดยใช้npm install. หากฉันต้องการใช้จากโมดูลโหนดฉันจะใช้ในไฟล์ html ได้อย่างไร หากฉันต้องการแก้ไขไฟล์ที่น้อยกว่าฉันจำเป็นต้องแก้ไขในโมดูลโหนดหรือไม่

111 css node.js less npm font-awesome

คำถามติดแท็ก font-awesome