Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Font Awesome with MPDF?

I am using Zend Framework and creating PDF with mpdf.
I am trying to use fontawesome for denoting some of the articles but the fonts of font awesome are not rendering properly below is the code .

$stylesheet =  file_get_contents("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
$stylesheet .= file_get_contents("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

$this->mpdf->WriteHTML($stylesheet,1);
$this->mpdf->WriteHTML($html,2);
$this->mpdf->allow_charset_conversion = true; 
$this->mpdf->charset_in = 'windows-1252';
$this->mpdf->Output();

The code I am using in the html

<span class="company-name">&#xf21b; name of the company</span>

Thanks in advance.

like image 601
Mega Fox Avatar asked Jul 15 '15 13:07

Mega Fox


People also ask

Can you use font awesome in CSS?

CSS has an awesome feature called Pseudo-elements . Using Pseudo-elements we can add content to the web page with just CSS. Font awesome uses ::before pseudo-element to add icons to the page using their CSS content codes.


2 Answers

EDIT: Nowadays, this is an obsolete method, and should only be used on legacy systems.

I recommend the answer below, from @Arie, to modify the mPDF font in its recent versions and/or if it was installed by Composer, passing the parameters when instantiating the class.


The easy way:

  1. Copy fontawesome-webfont.ttf file into /mPDF/ttfonts/ directory.

  2. Edit /mPDF/config_fonts.php, search the array started by $this->fontdata and add to it:

"fontawesome" => array(
    'R' => "fontawesome-webfont.ttf",
),
  1. Change your document CSS properly, with your new font family. Eg.:
$stylesheet = '.company-name { font-family: fontawesome; }';
  1. When you instantiate the class, let the first parameter in blank:

Eg.:

$mpdf = new mPDF();

or

$mpdf = new mPDF('', 'A4');

I am tested with mPDF 6.0 and it worked.

Also, the mPDF manual explain how to do it with more options: Fonts in mPDF 6.x

like image 112
Lord_Dracon Avatar answered Sep 25 '22 10:09

Lord_Dracon


A more recent solution for Font Awesome 5.x and mPDF 7.x, when you don't want to edit the source files/dirs from mPDF: https://mpdf.github.io/fonts-languages/fonts-in-mpdf-7-x.html

My use case, this offers usage of mPDF supplied fonts, fontawesome and another custom font (ibmplex in this case). Note that when supplying a font name such as 'ibmplex' and 'fontawesome', they are lowercase. To avoid confusion why a font doesn't work, I'd advice using lower case and no spaces for the names.

$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];

$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];

$mpdf = new \Mpdf\Mpdf([
    'fontDir' => array_merge($fontDirs, [
        __DIR__ . '/../../resources/fonts',
    ]),
    'fontdata' => $fontData + [
        'ibmplex' => [
            'R' => 'IBMPlexSans-Regular.ttf',
            'B' => 'IBMPlexSans-Bold.ttf',
            'I' => 'IBMPlexSans-Italic.ttf',
        ],
        'fontawesome' => [
            'R' => 'fa-solid-900.ttf'
        ],
    ],
    'default_font' => 'ibmplex',
    'format' => 'A4'
]);

Then you can use

<span style="font-family: fontawesome;">&#xf3ed;</span>

As per https://fontawesome.com/cheatsheet -- note that f3ed is the actual icon in this case.

like image 34
Arie Avatar answered Sep 24 '22 10:09

Arie