FontAwesome Icons

RockPdf makes it possible to use FontAwesome icons without calling any additional PHP methods or helper functions! All you need are two simple steps:

• Download FontAwesome to /site/templates/RockPdf/fontawesome
• Add regular FA markup like <i class="fa-solid fa-face-smile"></i>

Downloading FontAwesome

Head over to https://fontawesome.com/download and download "FontAwesome For The Web".

Then extract that folder and copy the following files to /site/templates/RockPdf/fontawesome so that the final file structure looks like this:

/site/templates/RockPdf/fontawesome/metadata/icons.yml
/site/templates/RockPdf/fontawesome/webfonts/fa-brands-400.ttf
/site/templates/RockPdf/fontawesome/webfonts/fa-regular-400.ttf
/site/templates/RockPdf/fontawesome/webfonts/fa-solid-900.ttf

Adding Markup

Then create an example latte/php file:

<h1 class="f30">RockPdf Icons Demo</h1>

<div class="mt5 f20">
  <i class="fa-solid fa-anchor-circle-check"></i>
  <i class="fa-solid fa-face-smile"></i>
  <i class="fa-regular fa-file-code f50" style="color: red"></i>
</div>

<div class="f20 mt10 bg-primary text-center white p5 r5">
  <i class="fa-solid fa-shuttle-space"></i>
  Start using RockPdf today!
</div>

And add this to /site/ready.php to test it:

$modules->get('RockPdf')
  // Optional: Make Ubuntu the default font
  // https://www.fontsquirrel.com/fonts/ubuntu
  ->addFont(
    ['R' => 'site/templates/fonts/ubuntu/Ubuntu-R.ttf'],
    name: 'ubuntu',
    default: true
  )
  ->load("site/templates/icons.latte")
  ->save(preview: true, saveHTML: true);

The result should look something like this:

And it will create the following html for you:

<style>
.fa-solid { font-family: 'fa-solid'; }
.fa-regular { font-family: 'fa-regular'; }
</style>
<!-- loaded /var/www/html/site/templates/icons.latte -->

<!-- StylesArray 'site-templates-icons' -->
<!-- These comments are only visible when $config->debug = true; -->
<!-- loading /site/modules/RockPdf/styles/reset.less (RockPdf.module.php:393) -->
<!-- loading /site/modules/RockPdf/styles/utils.less (RockPdf.module.php:394) -->
<link href="/site/assets/RockPdf/site-templates-icons.css?m=1706349062" rel="stylesheet"><!-- LESS compiled by RockFrontend -->

<!-- begin of document -->
<h1 class="f30">RockPdf Icons Demo</h1>

<div class="mt5 f20">
  <span class="fa-solid fa-anchor-circle-check">&#xe4aa;</span>
  <span class="fa-solid fa-face-smile">&#xf118;</span>
  <span class="fa-regular fa-file-code f50" style="color: red">&#xf1c9;</span>
</div>

<div class="f20 mt10 bg-primary text-center white p5 r5">
  <span class="fa-solid fa-shuttle-space">&#xf197;</span>
  Start using RockPdf today!
</div>

Note that RockPdf conveniently and automatically adds the font-family rules for each FontAwesome icon used at the top of your HTML! 😎

It will also change <i> tags to <span> tags so that the icons are not in italic style. And finally RockPdf will place the unicode representation of the icon inside the element to display the correct icon.

Adding additional classes/styles to your icons

Note that on the last icon we used this markup:

<i class="fa-regular fa-file-code f50" style="color: red"></i>

That demonstrates that you can add custom classes and custom style attributes to your icons. In this example we add f50 for font-size: 50pt and we make the icon red.

Make sure that the icon type is always first (eg fa-regular) and the icon name is always second (eg fa-file-code).

This would not work:

<i class="f50 fa-regular fa-file-code" style="color: red"></i>