font-awesome

问题 Any one know how to show the FontAwesome icon for Instagram and style it to be shown with the new Instagram icon multi colors? New instagram icon 回答1: I was trying to do the same. I found this is solution after several attempt. .fa.fa-instagram { color: transparent; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)

问题 Any one know how to show the FontAwesome icon for Instagram and style it to be shown with the new Instagram icon multi colors? New instagram icon 回答1: I was trying to do the same. I found this is solution after several attempt. .fa.fa-instagram { color: transparent; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)

问题 I want to add a new custom SVG icon to Fontawesome 5 and assume that I need to create a definition for it in the JavaScript file. var icons = { "address-book": [448, 512, [], "f2b9", "M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zm-228-32c44.183 0

问题 I have to create a list like this I have tried to replace bullet with fontawesome icon which worked but I am getting something like this Notice, there is a spacing difference between both of them. My CSS is .custom_list li { line-height:2em; padding-left:0px; padding-top:5px; padding-bottom:5px; font-size:14px; list-style-type:none; list-style:none; } .custom_list li:before { font-family: 'FontAwesome'; content: "\f192"; color: black; margin-right:15px; } HTML is <ul class="custom_list" > <li

问题 I want to convert a rel content into a Font Awesome CSS icon, so I won't have to write 20 lines for a simple menu. Maybe some code would make it easier to understand. I tried to do this: a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';} Basically I am trying to convert the value inside the rel and convert it to a working CSS rule. So the link looks like this: <a href="http://www.example.com" rel="f291">Example</a> The end result should look something like: a:before {content:

问题 I've been trying to add icons to my save, delete, etc. buttons. I have about five buttons using the <g:actionSubmit> tag to call an action in a controller to perform the corresponding functions. My problem is that FontAwesome and bootstrap's glyphicons require the <i class="icon-***"> tag to be used like so: <a href="http://google.com"> <i class="icon-ok"></i> Google </a> In grails this format of the tag in between the initial tag is not possible (at least with actionSubmit ). The value

问题 How i fix this? First "D" is rendered on Chrome 31.0.1650.63 m and second is rendered on IE11. Update: adding -webkit-font-smoothing: antialiased; the problem remains... It could be a problem with the video card? Update 2: css font code: @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src:

问题 I'm trying to put a Font-awesome icon inside an input tag. This is my HTML code: <div class="input-group"> <input class="form-control" type="password" placeholder="Password"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> </div> But that icon is bigger than input box as you can see in this picture: How can I fix the icon? 回答1: Bootstrap 3 Checkout the Bootstrap examples in the Font Awesome documentation: <div class="input-group margin-bottom-sm"> <span class="input

问题 I am trying to embed an icon in an option from a select list. Using font-awesome icons, no icon is being displayed. <select> <option><i class="icon-camera-retro"></i> Doesn't work in option!</option> </select> Can i use font-awesome to achieve what i need? Or do i have to scrap using font-awesome and do a manual CSS background for each option? JSFiddle: http://jsfiddle.net/mmXh2/1/ 回答1: You can use FontAwesome as a unicode font and insert your icons in a cross-platform way. You just need to

问题 I am having an issue very similar to: "Jquery 'click' not firing when icon is on button" however the resolution for that post is not providing a solution for me, so I think something different may be going on. The essential problem is that I have a button with an icon in it. When I click on the button (e.g. the text) the event target is the button element; however when I click on the icon, the event target is the icon object. This unfortunately is extremely annoying as I am storing data