PhantomJS 1.9.7 doesn't show icon font #12132
Comments
|
I have also seen this with FontAwesome on OSX and 1.9.7 via homebrew. |
|
Can confirm. |
|
Install the Font Awesome library into your OSX Fonts via Font Book.app |
|
Haven't tried that, yet. But shouldn't all icon font files be loaded and used? |
|
(Issue posted here: #12320) Context: Using phantomjs to process HTML and output PDFs (reports). To produce the HTML, I'm using a handlebars html template + json data from within node.js and then pass this HTML content off to phantomjs via page.setContent(...). The HTML that is loaded by PhantomJS shown later / below. Problem: In certain situations, phantomjs is able to render a PDF and the FontAwesome fonts are visible within the resulting PDF however, in certain situations (seemingly randomly) the FontAwesome fonts are NOT visible within the PDF. Goal: To generate PDFs from HTML using phantomjs that always, 100% of the time, display (visible) the FontAwesome fonts / icons / images. HTML: <!DOCTYPE html>
<html lang="en">
<head>
<title>NA</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="all">
@font-face {
font-family: FontAwesome;
src: url('font-awesome-4.1.0/fonts/fontawesome-webfont.ttf');
}
</style>
<style media="all">
/*!
* Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/** OMITTED actual CSS (inlined font-awesome.min.css minus the @font-face declaration) **/
</style>
<script src="js/lib/jquery/jquery.js"></script>
<script src="js/lib/jquery.columnizer/src/jquery.columnizer.js"></script>
<script>
function buildPages(pageNumber){
//recursive function that invokes jquery columnizer to layout the content..
}
function postBuildPages() {
setTimeout(function() {
if (typeof window.callPhantom === 'function') {
window.callPhantom({ status: 'success' }); // will trigger the 'onCallback' handler within node.js
}
}, 100); //adding a delay in hopes that phantomjs will have more time to process
}
setTimeout(function () {
buildPages(pageNumberStart);
postBuildPages();
}, 100); //adding a delay in hopes that phantomjs will have more time to process
</script>
</head>
<body class="base">
<div>
<span><i class="fa fa-circle"></i> A </span>
<span><i class="fa fa-circle-o"></i> B</span>
<span><i class="fa fa-adjust"></i> C </span>
<span><i class="fa fa-times"></i> None </span>
</div>
</body>
</html>var _ = require('lodash'),
fs = require('fs'),
uuid = require('uuid'),
PhantomPool = require('./lib/phantom-pool'),
Generator = require('../base'),
HTMLGenerator = require('../html'),
cargoweb = require('../../web'),
stringFormat = require('string-format'),
util = require('util');
/**
* Cargo PDF Generator
*
*/
module.exports = Generator.extend({
// options for print layout
_pageSettings: {
width: '8.5in',
height: '11in',
orientation: 'portrait',
border: '0.4in'
},
init: function(options) {
options = options || {};
this._port = options.serverPort || 8000;
this._delayRenderTimeout = options.delayRenderTimeout || 100;
this._phantomPoolSize = options.phantomPoolSize || 8;
this._pool = new PhantomPool(this._phantomPoolSize);
this._server = cargoweb.listen(this._port);
this._htmlGenerator = new HTMLGenerator();
},
generate: function(rcfContent, templateContent, cb) {
var tmpFile = '/tmp/{0}'.format(uuid.v4()),
self = this;
this._htmlGenerator.generate(rcfContent, templateContent, function (htmlContent) {
self._pool.acquire(function (session) {
session.createPage(function (page) {
page.set('onResourceError', function(resourceError) {
console.error('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
console.error('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
});
page.set('onError', function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
});
page.set('onCallback', function (data) {
setTimeout(function(){
page.render(tmpFile, { format: 'pdf' }, function() {
page.close();
page = null;
self._pool.release(session);
fs.readFile(tmpFile, { encoding: 'binary' }, function (err, pdfContent) {
fs.unlink(tmpFile);
cb(pdfContent);
});
});
}, self._delayRenderTimeout);
});
page.set('paperSize', self._pageSettings, function() {
page.setContent(htmlContent, 'http://localhost:'+self._port, function() {
//web page will fire an message when done!
/**
if (typeof window.callPhantom === 'function') {
window.callPhantom({ status: 'success' });
}
*/
});
});
});
});
});
},
destroy: function() {
if (this._pool) this._pool.destroy();
if (this._server) this._server.close();
if (this._htmlGenerator) this._htmlGenerator.destroy();
}
});Tech Stack: {
"name": "cargo",
"version": "0.1.8",
"bin": {
"cargo": "bin/cargo.js"
},
"dependencies": {
"amdefine": "^0.1.0",
"async": "^0.9.0",
"body-parser": "^1.3.0",
"cli": "0.6.2",
"connect-busboy": "0.0.1",
"errorhandler": "^1.0.2",
"express": "^4.4.2",
"handlebars": "^1.3.0",
"jade": "^1.3.1",
"lodash": "2.4.1",
"minimist": "0.1.0",
"moment": "^2.6.0",
"phantom": "^0.6.3",
"string-format": "^0.2.1",
"uuid": "^1.4.1"
},
"devDependencies": {
"dateformat": "^1.0.8-1.2.3",
"ejs": "^1.0.0",
"grunt": "0.4.5",
"grunt-cli": "0.1.13",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-compress": "^0.9.1",
"grunt-contrib-connect": "0.7.1",
"grunt-contrib-jasmine": "0.6.5",
"grunt-contrib-jshint": "0.10.0",
"grunt-contrib-less": "0.11.1",
"grunt-jasmine-node": "0.2.1",
"grunt-newer": "0.7.0",
"grunt-nexus-deployer": "0.0.3",
"grunt-template-jasmine-requirejs": "0.2.0"
}
}OS: |
|
We had the same problem. Reverting to 1.9.1 "solved" the problem. To make it easier to google, the icon looks like a space invader ;-) |
|
Experiencing the same problem |
|
Same thing here. No iconic font rendered in 1.9.8, on OSX 10.10 |
|
Phantom 1.9.8 OSX installed with Homebrew. I followed @stevematyas suggestion and installed the Font Awesome .ttf and now the font is rendered correctly |
|
Was experiencing the issue with Ionicons, followed @stevematyas suggestion and installed the ttf using Font Book, and everything is now working perfectly. Thank you very much. |
|
I had a similar-looking issue with V2, but in that scenario it turned out to be a local fault. Posting here in case someones had the same oversight - We used the standard CSS definition Font Awesome, but removed all physical font files except for .woff and .eot Phantom read the CSS definition and picked .ttf font-file to load (which we found out by looking through access logs). The .ttf file did not exist, so nothing was pulled in - after we restored the ttf file, V2was able to render PDFs with all icons present. |
|
+1 - still happens in 1.9.17.. if anyone is looking for 1.9.1 - we found it at: http://code.google.com/p/phantomjs/downloads/list?can=1&q=&colspec=Filename+Summary+Uploaded+ReleaseDate+Size+DownloadCount |
|
Any leads on this that don't involve installing the fonts? I'm using 1.9.7 on the server for a public webapp. The fonts are located in the public directory for the app, but phantom is somehow missing them. |
|
Downgrading to 1.9.1 also worked for me :) |
|
@stevematyas thanks a ton for posting that, I hadn't even thought about overriding the In my case, I use @font-face {
font-family: 'FontAwesome';
src: url('/path/to/font-awesome.svg') format('svg');
}Using version 1.9.8 |
|
I was having a lot of similar problems, and I just upgraded to the latest version of Phantom (2.1.3) and all my problems have been fixed. |
|
This was fixed in 1.9.8 version (.ico files only were supported). |
Hello,
I'm using PhantomJS to automatically create screenshots of my mobile web app.
I'm also using FontAwesome (an icon font) and everything worked finde until I updated PhantomJS from
1.9.1to1.9.7using Homebrew.With the latest PhantomJS version I get this for every single icon:
OS: MacOS X 10.9.2
node: v0.10.26
PhantomJS: 1.9.7
Any ideas?
Regards,
Andre
The text was updated successfully, but these errors were encountered: