mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2025-01-31 07:28:26 +08:00
Updated Troubleshooting (markdown)
doshprompt
parent
2403970e33
commit
8bec3e33a1
@ -1,143 +1,145 @@
|
|||||||
#### After upgrading, some icons don't show up
|
#### After upgrading, some icons don't show up
|
||||||
1. You don't have an old version of Font Awesome installed on your system (it has priority);
|
1. You don't have an old version of Font Awesome installed on your system (it has priority);
|
||||||
2. Both your `font-awesome.css` file and your `/fonts` (`/font` in 3.2.1) folders are up to date (if you are serving Font Awesome from your own server);
|
2. Both your `font-awesome.css` file and your `/fonts` (`/font` in 3.2.1) folders are up to date (if you are serving Font Awesome from your own server);
|
||||||
3. Your css link is up to date (if you are serving Font Awesome from a CDN) (Refers to [#1490](https://github.com/FortAwesome/Font-Awesome/issues/1490));
|
3. Your css link is up to date (if you are serving Font Awesome from a CDN) (Refers to [#1490](https://github.com/FortAwesome/Font-Awesome/issues/1490));
|
||||||
4. You are not using plugins loading older/modified versions of Font Awesome (Refers to [#1546]( https://github.com/FortAwesome/Font-Awesome/issues/1546));
|
4. You are not using plugins loading older/modified versions of Font Awesome (Refers to [#1546]( https://github.com/FortAwesome/Font-Awesome/issues/1546));
|
||||||
5. You are using valid [HTML5](http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html) templates.
|
5. You are using valid [HTML5](http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html) templates.
|
||||||
|
|
||||||
#### Are you/your customers using Adblock Plus?
|
#### Are you/your customers using Adblock Plus?
|
||||||
If "Remove Social Media Buttons" option is enabled, you will miss some brand icons. Refer to [#1799]( https://github.com/FortAwesome/Font-Awesome/issues/1799) for more information.
|
If "Remove Social Media Buttons" option is enabled, you will miss some brand icons. Refer to [#1799]( https://github.com/FortAwesome/Font-Awesome/issues/1799) for more information.
|
||||||
|
|
||||||
#### Internet Explorer compatibility mode
|
#### Internet Explorer compatibility mode
|
||||||
This feature will cause some random issues with IE, so please disable it by adding to your `head`:
|
This feature will cause some random issues with IE, so please disable it by adding to your `head`:
|
||||||
```html
|
```html
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
```
|
```
|
||||||
Refers to [#4144](https://github.com/FortAwesome/Font-Awesome/issues/4144)
|
Refers to [#4144](https://github.com/FortAwesome/Font-Awesome/issues/4144)
|
||||||
|
|
||||||
#### Are you using IE8?
|
#### Are you using IE8?
|
||||||
If you are using IE8, it's necessary to add the html5.js script like:
|
If you are using IE8, it's necessary to add the html5.js script like:
|
||||||
```css
|
```css
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
```
|
```
|
||||||
That work around was used even for Font-Awesome 3.2.1 homepage, but works also for Font-Awesome 4.0.3. Refers to [#2324](https://github.com/FortAwesome/Font-Awesome/issues/2324#issuecomment-42333148)
|
That work around was used even for Font-Awesome 3.2.1 homepage, but works also for Font-Awesome 4.0.3. Refers to [#2324](https://github.com/FortAwesome/Font-Awesome/issues/2324#issuecomment-42333148)
|
||||||
|
|
||||||
#### Phonegap / Android (icons in Heading tags)
|
#### Phonegap / Android (icons in Heading tags)
|
||||||
Icons doesn't show up in tags with `text-rendering: optimizeLegibility`. According to your Font Awesome version, please add to your stylesheets:
|
Icons doesn't show up in tags with `text-rendering: optimizeLegibility`. According to your Font Awesome version, please add to your stylesheets:
|
||||||
```css
|
```css
|
||||||
/* FA 4.0.0 and newer */
|
/* FA 4.0.0 and newer */
|
||||||
.fa {
|
.fa {
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FA 3.2.1 and older */
|
/* FA 3.2.1 and older */
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
(more info on [#862](https://github.com/FortAwesome/Font-Awesome/pull/862))
|
(more info on [#862](https://github.com/FortAwesome/Font-Awesome/pull/862))
|
||||||
|
|
||||||
|
|
||||||
#### font-variant (Small caps)
|
#### font-variant (Small caps)
|
||||||
If you are using `font-variant: small-caps;`, according to your Font Awesome version, please add to your stylesheets:
|
If you are using `font-variant: small-caps;`, according to your Font Awesome version, please add to your stylesheets:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* FA 4.0.0 and newer */
|
/* FA 4.0.0 and newer */
|
||||||
.fa {
|
.fa {
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FA 3.2.1 and older */
|
/* FA 3.2.1 and older */
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
(more info on [#2171](https://github.com/FortAwesome/Font-Awesome/issues/2171))
|
(more info on [#2171](https://github.com/FortAwesome/Font-Awesome/issues/2171))
|
||||||
|
|
||||||
|
|
||||||
#### Need a blank/empty icon?
|
#### Need a blank/empty icon?
|
||||||
By design, icons have not the same width, so a blank icon is pretty useless. You should use `fa-fw` if you need a placeholder. If you also need to validate a database, allow the blank value.
|
By design, icons have not the same width, so a blank icon is pretty useless. You should use `fa-fw` if you need a placeholder. If you also need to validate a database, allow the blank value.
|
||||||
|
|
||||||
(more info on [#1606](https://github.com/FortAwesome/Font-Awesome/issues/1606))
|
(more info on [#1606](https://github.com/FortAwesome/Font-Awesome/issues/1606))
|
||||||
|
|
||||||
|
|
||||||
#### Reveal.js
|
#### Reveal.js
|
||||||
According to your Font Awesome version, please add to your stylesheets:
|
According to your Font Awesome version, please add to your stylesheets:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* FA 4.0.0 and newer */
|
/* FA 4.0.0 and newer */
|
||||||
.reveal .fa {
|
.reveal .fa {
|
||||||
font-family: 'FontAwesome';
|
font-family: 'FontAwesome';
|
||||||
}
|
font-style: normal;
|
||||||
|
}
|
||||||
/* FA 3.2.1 and older */
|
|
||||||
.reveal [class^="icon-"],
|
/* FA 3.2.1 and older */
|
||||||
.reveal [class*=" icon-"] {
|
.reveal [class^="icon-"],
|
||||||
font-family: 'FontAwesome';
|
.reveal [class*=" icon-"] {
|
||||||
}
|
font-family: 'FontAwesome';
|
||||||
```
|
font-style: normal;
|
||||||
|
}
|
||||||
(more info on [#2131](https://github.com/FortAwesome/Font-Awesome/pull/2131))
|
```
|
||||||
|
|
||||||
|
(more info on [#2131](https://github.com/FortAwesome/Font-Awesome/pull/2131))
|
||||||
### ie7-js
|
|
||||||
FontAwesome is not compatible with [ie7-js](https://code.google.com/p/ie7-js/).
|
|
||||||
|
### ie7-js
|
||||||
(more info on [#2171](https://github.com/FortAwesome/Font-Awesome/issues/2821))
|
FontAwesome is not compatible with [ie7-js](https://code.google.com/p/ie7-js/).
|
||||||
|
|
||||||
|
(more info on [#2171](https://github.com/FortAwesome/Font-Awesome/issues/2821))
|
||||||
#### Stack icons inside Wordpress posts
|
|
||||||
|
|
||||||
Wordpress automatically adds a `<br>` tag at the end of the line and this will break icon stacks. Please put your html in one line or add to your stylesheet:
|
#### Stack icons inside Wordpress posts
|
||||||
|
|
||||||
```css
|
Wordpress automatically adds a `<br>` tag at the end of the line and this will break icon stacks. Please put your html in one line or add to your stylesheet:
|
||||||
.fa-stack br { display: none }
|
|
||||||
```
|
```css
|
||||||
(more info on [#4212](https://github.com/FortAwesome/Font-Awesome/issues/4212))
|
.fa-stack br { display: none }
|
||||||
|
```
|
||||||
|
(more info on [#4212](https://github.com/FortAwesome/Font-Awesome/issues/4212))
|
||||||
#### Get TTF/OTF fonts working in IE9+
|
|
||||||
|
|
||||||
While [some browsers](http://caniuse.com/ttf) support the TTF/OTF formats as webfonts, Internet Explorer generates an error unless the font is set to Installable Embedding mode. This behavior is reproduced when neither `.woff` nor `.eot` variants are served to IE.
|
#### Get TTF/OTF fonts working in IE9+
|
||||||
|
|
||||||
(more info on [#2517](https://github.com/FortAwesome/Font-Awesome/issues/2517))
|
While [some browsers](http://caniuse.com/ttf) support the TTF/OTF formats as webfonts, Internet Explorer generates an error unless the font is set to Installable Embedding mode. This behavior is reproduced when neither `.woff` nor `.eot` variants are served to IE.
|
||||||
|
|
||||||
This can be remedied by setting the ``fsType`` flag in the font file to ``0000``, representing Installable Embedding mode, using one of the following utilities:
|
(more info on [#2517](https://github.com/FortAwesome/Font-Awesome/issues/2517))
|
||||||
|
|
||||||
##### Using the ttembed-js npm module
|
This can be remedied by setting the ``fsType`` flag in the font file to ``0000``, representing Installable Embedding mode, using one of the following utilities:
|
||||||
```
|
|
||||||
npm install -g ttembed-js
|
##### Using the ttembed-js npm module
|
||||||
ttembed-js path/to/fontawesome-webfont.ttf
|
```
|
||||||
ttembed-js path/to/FontAwesome.otf
|
npm install -g ttembed-js
|
||||||
```
|
ttembed-js path/to/fontawesome-webfont.ttf
|
||||||
or, within node.js:
|
ttembed-js path/to/FontAwesome.otf
|
||||||
```js
|
```
|
||||||
var callback = function(error, oldFsType) {
|
or, within node.js:
|
||||||
if (error) {
|
```js
|
||||||
console.error('Something went wrong.', error);
|
var callback = function(error, oldFsType) {
|
||||||
return;
|
if (error) {
|
||||||
}
|
console.error('Something went wrong.', error);
|
||||||
if (oldFsType === '0000') {
|
return;
|
||||||
console.log('fsType is already 0000; no action taken.');
|
}
|
||||||
} else {
|
if (oldFsType === '0000') {
|
||||||
console.log('fsType successfully changed from ' + oldFsType + ' to 0000.');
|
console.log('fsType is already 0000; no action taken.');
|
||||||
}
|
} else {
|
||||||
}
|
console.log('fsType successfully changed from ' + oldFsType + ' to 0000.');
|
||||||
var ttembed = require('ttembed-js');
|
}
|
||||||
ttembed({filename: './path/to/fontawesome-webfont.ttf'}, callback);
|
}
|
||||||
ttembed({filename: './path/to/FontAwesome.otf'}, callback);
|
var ttembed = require('ttembed-js');
|
||||||
```
|
ttembed({filename: './path/to/fontawesome-webfont.ttf'}, callback);
|
||||||
|
ttembed({filename: './path/to/FontAwesome.otf'}, callback);
|
||||||
##### Using the original ttembed
|
```
|
||||||
```
|
|
||||||
git clone https://github.com/hisdeedsaredust/ttembed.git
|
##### Using the original ttembed
|
||||||
cd ttembed
|
```
|
||||||
make
|
git clone https://github.com/hisdeedsaredust/ttembed.git
|
||||||
./ttembed path/to/fontawesome-webfont.ttf path/to/FontAwesome.otf
|
cd ttembed
|
||||||
|
make
|
||||||
|
./ttembed path/to/fontawesome-webfont.ttf path/to/FontAwesome.otf
|
||||||
```
|
```
|
||||||
Loading…
x
Reference in New Issue
Block a user