font-awesome

问题 I am wondering if it's possible to utilize font-awesome (or any other iconic font) classes to create a custom <li> list-style-type? I am currently using jQuery to do this, ie: $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); However, this doesn't style properly when the <li> text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator. Any tips? 回答1: The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element.

问题 When using the brilliant Font Awesome, how can I make the icons not transparent - for instance if I want to use http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ but not have the "up arrow" within the black circle be transparent but solid color (white)? Thanks! 回答1: UPDATE: As xavier pointed out below, font-awesome has Stacked Icons which will let you put a circle behind an icon without using a hack. Essentially, you stack whichever icon you want on top of their fa-circle icon

问题 How to change the inner (white) color of the icon <i class="fa fa-exclamation-triangle"></i> ? P.S. Applying <i class="fa fa-exclamation-triangle" style="color:red"></i> is not an answer, as the red color applies to the outer color, not to the inner exclamation white sign itself. The Font Awesome version is: 4.7.0. 回答1: The exclamation mark of this icon is a transparent part, so a trick is to add a background behind it to have the needed coloration. Of couse, the background shouldn't cover

问题 <div class="col-md-4"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x blue"></i> <i class="fa fa-wifi fa-stack-1x white"></i> </span> <h4 class="blue">Free wifi</h4> </div> How can I display h4 element on the right of the icon and vertically aligned? Should I float left the span ? 回答1: One of the ways would be to use inline-block display and middle align it - see demo below: .wrapper > * { display: inline-block; vertical-align: middle; } .blue { color: blue; } .white { color

问题 I'm building a website portfolio using a HTML template. I don't have too much experience with css, but after importing the font-awesome css file both as a link and file in my django project, the icons are showing up as little boxes. I know the css file is being recognized because when I comment it out the boxes go away. I think there may be something deeper going on with the css that I don't understand. I suspect there's something going on in the main css file if someone could help me out.

问题 I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can see this icon in all the browsers except IE 11. The funny thing is I have this icon in other pages also and I can see it in IE 11, but I cannot see this icon on this (as per below screenshot) page only. Here is the screenshot from IE 11: Here is the screenshot from chrome: Can anyone help me out

问题 I'm trying to integrate Font Awesome in JSF. <h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" /> But the browser can't find the font files. They appear as empty squares: I expected them to look like below: How is this caused and how can I solve it? 回答1: The Font Awesome CSS file is by default referencing those font files via a relative path ../ like below: @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('..

问题 There seems to be no class for input type 'submit' in font-awesome. Is it possible to use some class from font-awesome for button input? I've added icons to all buttons (which actually links with class 'btn' from twitter-bootstrap) in my applications, but can't add icons on 'input type submit'. Or, how to use this code: 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> (which I

问题 There seems to be no class for input type 'submit' in font-awesome. Is it possible to use some class from font-awesome for button input? I've added icons to all buttons (which actually links with class 'btn' from twitter-bootstrap) in my applications, but can't add icons on 'input type submit'. Or, how to use this code: 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> (which I

问题 Is it possible to use Font Awesome Icon in a Placeholder? I read where HTML isn't allowed in a placeholder. Is there a workaround? placeholder="<i class='icon-search'></i>" 回答1: You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome.css for the escaped Unicode character in the content rule. In