This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Icon Fonts: Font-Awesome, Fontello, Icomoon

tommcquarrie wrote on 2013-10-24:
Just ran some preliminary tests and can't get this to work but hoping there's some work around. We want to implement icon fonts throughout our system, which also includes PDF generation, so we don't have to generate images for every icon we want to output, colours can be varied easily, and particularly for pdfs, the vector output is also handy. From the forums I've found that custom fonts should work: https://pdfcrowd.com/forum/archive/read/?3,1643,1684#msg-1684 but haven't seen details of the implementation.

Below is some sample code. I thought maybe the icon font used advanced css that isn't supported by pdfcrowd, but things like the partial [class*="icon-"] selector, as well as :before content both work fine, so it must be the font itself that's not working. is there perhaps a specific font format I should be using (ttf/eot/woff/svg) or perhaps there's a different method for embedding the custom font?

<html>

<head>
    <style type="text/css">
        @font-face {
            font-family: 'icomoon';
            src:url('http://i.icomoon.io/public/temp/af46271049/AroSoftware/icomoon.eot?-mt92uq');
            src:url('http://i.icomoon.io/public/temp/af46271049/AroSoftware/icomoon.eot?#iefix-mt92uq') format('embedded-opentype'),
            url('http://i.icomoon.io/public/temp/af46271049/AroSoftware/icomoon.ttf?-mt92uq') format('truetype'),
            url('http://i.icomoon.io/public/temp/af46271049/AroSoftware/icomoon.woff?-mt92uq') format('woff'),
            url('http://i.icomoon.io/public/temp/af46271049/AroSoftware/icomoon.svg?-mt92uq#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        [class*="icon-"] {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;

            /* Enable Ligatures ================ */
            -webkit-font-feature-settings: "liga";
            -moz-font-feature-settings: "liga=1";
            -moz-font-feature-settings: "liga";
            -ms-font-feature-settings: "liga" 1;
            -o-font-feature-settings: "liga";
            font-feature-settings: "liga";

            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-carspaces:before {
            content: "a";
        }
        .icon-bedrooms:before {
            content: "b";
        }
        .icon-bathrooms:before {
            content: "c";
        }

        .before:before{
            content : "Before works!";
        }
    </style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Capicola swine pig pork belly, chuck pancetta ground round prosciutto pork loin shank. Corned beef ham tail, biltong hamburger pork bacon capicola.</p>
<p>Salami sirloin tail pig venison rump chuck sausage cow beef ribs. Tenderloin hamburger brisket, swine t-bone pork belly meatloaf drumstick sausage sirloin capicola jerky tongue.
    Shankle bresaola chuck, fatback capicola chicken t-bone pig hamburger strip steak pork chop boudin kielbasa turducken.</p>

<h1>Icons</h1>

<h2>Ligature Method</h2>

<div class="icons">
    <span><i class="icon-ligature">Bedrooms</i> 5</span>
    <span><i class="icon-ligature">Bathrooms</i> 2</span>
    <span><i class="icon-ligature">CarSpaces</i> 2</span>
</div>

<h2>Class name method</h2>

<div class="icons">
    <span><i class="icon-bedrooms"></i> 5</span>
    <span><i class="icon-bathrooms"></i> 2</span>
    <span><i class="icon-carspaces"></i> 2</span>
</div>

<h2>Character code method</h2>

<div class="icons">
    <span><i class="icon-char">b</i> 5</span>
    <span><i class="icon-char">c</i> 2</span>
    <span><i class="icon-char">a</i> 2</span>
</div>

<h2>CSS :before test</h2>

<div class="before"></div>
<hr/>
</body>
</html>
tommcquarrie wrote on 2013-10-24:
Sigh... never mind. Didn't realised the temporary iconmoon url had stopped working. Uploaded the fonts to my own server, and now this works just fine. I'm actually super impressed on pdfcrowd's part that this works. Nice job guys!

<html>

<head>
    <style type="text/css">
        @font-face {
            font-family: 'icomoon';
            src:url('http://www.arosoftware.com/icomoon/fonts/icomoon.eot?-mt92uq');
            src:url('http://www.arosoftware.com/icomoon/fonts/icomoon.eot?#iefix-mt92uq') format('embedded-opentype'),
            url('http://www.arosoftware.com/icomoon/fonts/icomoon.ttf?-mt92uq') format('truetype'),
            url('http://www.arosoftware.com/icomoon/fonts/icomoon.woff?-mt92uq') format('woff'),
            url('http://www.arosoftware.com/icomoon/fonts/icomoon.svg?-mt92uq#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        [class*="icon-"] {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;

            /* Enable Ligatures ================ */
            -webkit-font-feature-settings: "liga";
            -moz-font-feature-settings: "liga=1";
            -moz-font-feature-settings: "liga";
            -ms-font-feature-settings: "liga" 1;
            -o-font-feature-settings: "liga";
            font-feature-settings: "liga";

            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }


        .icon-carspaces:before {
            content: "a";
        }
        .icon-bedrooms:before {
            content: "b";
        }
        .icon-bathrooms:before {
            content: "c";
        }

        .before:before{
            content : "Before works!";
        }
    </style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Capicola swine pig pork belly, chuck pancetta ground round prosciutto pork loin shank. Corned beef ham tail, biltong hamburger pork bacon capicola.</p>
<p>Salami sirloin tail pig venison rump chuck sausage cow beef ribs. Tenderloin hamburger brisket, swine t-bone pork belly meatloaf drumstick sausage sirloin capicola jerky tongue.
    Shankle bresaola chuck, fatback capicola chicken t-bone pig hamburger strip steak pork chop boudin kielbasa turducken.</p>

<h1>Icons</h1>

<h2>Ligature Method</h2>

<div class="icons">
    <span><i class="icon-ligature">Bedrooms</i> 5</span>
    <span><i class="icon-ligature">Bathrooms</i> 2</span>
    <span><i class="icon-ligature">CarSpaces</i> 2</span>
</div>

<h2>Class name method</h2>

<div class="icons">
    <span><i class="icon-bedrooms"></i> 5</span>
    <span><i class="icon-bathrooms"></i> 2</span>
    <span><i class="icon-carspaces"></i> 2</span>
</div>

<h2>Character code method</h2>

<div class="icons">
    <span><i class="icon-char">b</i> 5</span>
    <span><i class="icon-char">c</i> 2</span>
    <span><i class="icon-char">a</i> 2</span>
</div>

<h2>CSS :before test</h2>

<div class="before"></div>
<hr/>
</body>
</html>