font-awesome

Font-Awesome css not working locally

由 耗尽温柔 提交于 2019-12-03 06:33:11
I would like to use Font Awesome locally without using the cdn. My code fails to add font awesome icons to my page. I can make it work easily using the cdn link but the local link fails to do anything. Thanks Jason. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>How it Works | Rubberdesk </title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--

How do I decrease the size of a font-awesome icon?

由 醉酒当歌 提交于 2019-12-03 06:32:50
问题 What is the best way to decrease the size of a font awesome icon. There is a fa-3x, etc... to increase the size. Is there a class to decrease the size? 回答1: Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size: .fa { font-size: 12px; } 回答2: There are two Font Awesome classes to use if you need something simple: fa-xs and fa-sm . The size equivalents are: fa-xs: .75em fa-sm: .875em Sizing Icons | Font Awesome

Install font awesome 5 with npm for scss usage

由 强颜欢笑 提交于 2019-12-03 06:16:35
like title says, I can not install font awesome 5 with npm for scss purposes. Trying to install version 5 Accoring to https://fontawesome.com/how-to-use/use-with-node-js npm i --save @fortawesome/fontawesome Looking through the installation in node_modules I see no scss file to hook up to. I tried including the styles.css file in my app.scss file but that did not work. My setup for version 4: package.json "font-awesome": "^4.7.0", app.scss @import "node_modules/font-awesome/scss/font-awesome.scss"; Usage <i className="fa fa-save icon controlItem"></i> Easy as pie. How can I achieve this with

Rotating Glyphicons / Font Awesome in Bootstrap

由 夙愿已清 提交于 2019-12-03 05:52:08
I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color). Here's my attempt: http://jsfiddle.net/young_greedo17/88g5P/ ...which uses this code: <div class="widgetbox"> <br><br> <div class="icon-calendar icon-large"></div> <h5>Add an event</h5> </div> ... here's the CSS: .widgetbox { width: 250px; height: 250px; background-color: black; color: white; text-align: center; } .widgetbox [class*="icon-"] { -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; -o-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition

Use FontAwesome icon inside a ::before pseudo element with attr()

由 我只是一个虾纸丫 提交于 2019-12-03 05:49:09
I am trying to insert a FontAwesome icon inside a ::before pseudo element with attr() . The original code is more complex, however this will give you an idea of what I want: <div data-background-icon="\f086"></div> div::before { content: attr(data-background-icon); font-family: "FontAwesome"; } https://jsfiddle.net/grutcop8/ It doesn't work, while the usual way to embed it works OK: div::before { content: "\f086"; font-family: "FontAwesome"; } Anything I am missing? Try with Unicode CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i

Using an icon font (Font Awesome) looks a little blurred and too bold

由 ↘锁芯ラ 提交于 2019-12-03 05:44:04
问题 I'm using Font Awesome to create icons on my site, and while they look fantastic on the iPod Touch with Retina display, on my iMac they looks a bit blurred and less defined. Here's an image to demonstrate: As you can see, the font looks really nice and crispt on the Retina Display iPod Touch, but on the iMac, it's kind of crappy. What is causing this? Is this to do with anti aliasing ? Is there something I can do about this? 回答1: Problems like this are likely related to anti-aliasing or

How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

由 我的梦境 提交于 2019-12-03 05:36:35
I'm using Bootstrap 3 in my project and I'm using FontAwesome icons library instead of bundled Glyphicons . The problem is that I have some third-party components that rely on Glyphicons and I don't want to change their HTML. I'm including font-awesome via Bower and SASS + Compass (SCSS). Is it possible to replace Glyphicons with FontAwesome without changing the HTML and applying another CSS classes? You can use the following approach to overload Glyphicon CSS classes with FontAwesome ones using SCSS: // Overloading "glyphicon" class with "fa". .glyphicon { @extend .fa; // Overloading

Customize a select with font-awesome

由 孤人 提交于 2019-12-03 05:33:19
This is what I have actually: HTML <label class="select"> <select name="email" id="email"> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> </select> </label> CSS .cforms select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select { position:relative; display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; margin-top:40px; } .select:after { content: "\f0dc"; font-family: FontAwesome; color: #000; padding:8px; position:relative; right:35px;

References to font (font-awesome) resources are not updated in yeoman/angular grunt build

由 我只是一个虾纸丫 提交于 2019-12-03 04:56:29
I'm aware of the SO threads about this (I've linked them below), but unfortunately I couldn't solve this with them, so please allow me this question :-) I've bootstrapped an AngularJS project with Yeoman and thus rely on a grunt.js build utilizing bower.js and SCSS. I want to use font-awesome and the glyphicons-halflings-regular from bootstrap-sass-official. When running "grunt serve" everything is fine, but when I want to create a fileset for distribution, the references to the font files are not updated as they should. The main.scss contains $icon-font-path: "../bower_components/bootstrap

Alt or title attribute for i tag

由 蹲街弑〆低调 提交于 2019-12-03 04:06:05
问题 I use font-awesome and display their fonts like that: <i class="icon-lock"></i> This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail. Is there any attribute I can use for the <i> tag that executes the same task as alt for images and title for links? 回答1: You can use the title attribute on an i element, like any element, e.g. <i class="icon-lock" title="This symbolizes your being locked
订阅 font-awesome