{"tag":"webfont","articles":{"projects\/avris-fontawesomeoptimiser":{"key":"projects\/avris-fontawesomeoptimiser","type":"article","published":true,"meta":{"createdAt":"2020-01-09T23:04:10+01:00","publishedAt":"2020-01-09T23:04:10+01:00","group":null,"links":[{"icon":"globe-europe","colour":"primary","url":"https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser","displayUrl":"avris\/fontawesome-optimiser"},{"icon":"brands gitlab","colour":"secondary","url":"https:\/\/gitlab.com\/Avris\/FontAwesomeOptimiser","displayUrl":null}],"category":"projects","subcategory":null,"slug":"avris-fontawesomeoptimiser"},"content":{"en":{"slug":"avris-fontawesomeoptimiser","title":"Avris FontAwesomeOptimiser","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022320\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHvElEQVRIiX2X249lx1XGf+tStfc53eecnpnunhmPPZM4IRDZxEqUCEsWionkXARGuSiJAlKAB3gIykP+BN554wGBeIaniJdcpKBEJJESCQIi4DjOKA4ztmdsy\/b07fTpPnvvqsXDPjNGEKW0b9Ku2vXV99Va69ty\/R2PRZSKEEStEBVzp5ZCEKgIroapktzpujW1VoiACAQQEYSxiQgiAgT3W0RszvrgTlREQEUwd0yEppngEUJEUGpBAgQopSCMH1bVEago1EpSZdhMgMimHw\/6iwAIqvL25HL\/WYhaEDUi3h5nCEkNrQW\/P0BQgkoEaAii42SEoOqAMJSKIShCiGKqGzbGhSDju82xuRjuRtf1iEDEuEARRTdjTRU3I6niIQq1bAgeGSECCUHVcFNMBBPFTZGo1FqptYwfcB9XXyuq9kAqFSFqJQgWOzsc3jsAKoQgDlELqgIBZkoyI\/l9QAKoQN2wJSCiGxkMRTEzsiWmTQMxsDo7o3GnSU72RK2VUgaGUkAY90utAFy9vM\/6ZAnUkbQIVPMGlGI6SpxNcdFERI+EgVT0wSYV1Gyk1hIqioqh4mw1W1yYLDhYHqGhRAkaT6hniEKIMAz9yJDAjevXee3WS4gEEmAqCAEkRGIjmZJMcU2ZIdhEjN2PFVAd2VHD1MjuZEsohkiiyYl37m1zulqy7nsuX9mnO1uxPD7BRMiu1Kg89dEP8+LzLzDPDUGMkQWojqKogggkU7IbHpqQtJELoQaYKKqGiuLmuBrZMy5CMidJImnDxYsLPv3Hn+XihR3++avf5OXbL2PNNsnHaJottnnqIx\/mJ9\/9ATvtBChExAhGBRUwE0xH1twFJzfI4NQaG30BFFFDzREx3BzVhJttzsTTn\/htvvDnn+fmj37K1\/7qH0gU3nP1IaJWTk6XeDb+8C++wo\/+8Rs8PJ\/TlZ4aAxFllE430ZXGPZSTYgou7Ra1L0itYx4KQAwRRy2RzFE1kjltykzd+ZMvfYaPfepplgcnfONvvkbWCRemLe9690OcHr3J0eqcj3z5D0gq1Nuv8BtX91merTgfOkodKLUHrSQ3zAR3JbmQkuEynSPdAKUSMO4RFJGEiiGeyOq0KTFNiS988Rk+9qmnAfjP7z9HomG2PWN72nBy74wbH3wfH332Kbxt+OFf\/h37uws0eo6Og2FIlBgBhVRUg5QddyElxbPgMplBHqCAhEIogoI4aMLUSebklHjiiXfy+5\/7nQcl4fj1JZcu73Htxj43HnuERz7wKFu7cyKCl7\/1PbYmmVK3aZuB3FSQSo2eYeiI2qMGqoG5kRvHk+DMFjAUImQEE2N0GY5rQnFkkwC\/+GefeJCZAT7+p8\/wf1tEcOd7\/0b3xpvsveMS66NMf3rIXHvEKmJBrT11WCMMqAnmSsoZbxpcZzNSYawzKB5Kwsji5DCyGhnlA09c59q1i\/8PwP9utRRe\/Kd\/5eTmi7RbSruYsvfehxmOtjh+VVDpEHqQTJSESB0jLDmWM9ZM8NnOjFKADUOG4OG0YrQoLUZThSd\/692\/EszyjSOe\/\/oP6N56g0kDKPRnK1Zv9bh0TBcNtS9j7jFQSchGLnXHcos2E\/zKxQnDENQCNRQNRTFSCAmjDaUpwnse3f2lQM6OV\/zs+89x599fIEvPpK1j6agQPdS1QaPkiRJJMYmNTAk1xVJGc4OkBvIEf3y\/YXXe060L3VAppVJqRUKQqFgRTITdC9MHIE6XZ9y+eYdbP\/4Fd37y3zTRM\/VCpIJTyVoJDbCAbqyVkoLkgZtgJmhKSG4hGeQMuQFv8Wcv3OX0vLJc9hyfVpZDcLKGVQfnPXSDUAb427\/+e85Ozzh885jTe8fkUkgUEpVWKxMb2ErBvK100wqzIIXQ2mgzpPSoB5YNq0HfG8aMfm1omzg6mNLTIk8\/thvzNnF+Plql3Uv71FAOjleEJPCWviqeW87WHagjoriOWXuscUY2oVHYynB1d5tJOeHqhcKV\/cSF3Sk3f36HLoJOV8z2r\/Ddb\/8Lt15dM28r+\/sz1n3ww+dPke2di6EpI2pYSnzy2d\/j3r0DtGnZ2p6xf+kSP\/vFLd73+OPcvfMKbs6VvV3WXeVkeU6TWy4t5rSeSVJZbE1YvnbA9Ucu0h2+xbVrl2i1RxkwGdhuKw8\/Ehy+2XF6tMQOb+IysPfkM6z+6zvIh\/7oS9FszxkqtFszbly9wlBhb2fB6XrgoYs7rLseN6OUSpSKRXB0suLKYpvV8ozSD0xTgmGgW51zeb7F3nxKPVkyb53FvKWeHrI1nzC1jkd\/fY\/EAS\/99FUmwwGND0wuXybPF3jBWK7OwBLdyQnPLU8B5aYZEsJz7hsvBFIqlIrUSj0\/58e1kM2QEkgEVguJ0Rtv54YtN2buLJrENAmuhWmGN+7e5UO\/OefWS4fUKMwnMDu8y699\/P34we2f0\/U96plaKt5M4O1\/CATwlFBVJIKogcYIQGtFhuGBwa\/9Ghfj8PWXaHOLi7DYnnNpvoNHZbU65sJ8xn+84Lx2e8LrR+fceuucSQ4a7fjd4RVk913vjVoKQ9dR+zVpa4aEULpzNDVjOagDnluA0XMDWgNFkLjvoUcvrhEIFRPBVXABpZLNUA2GoUco7M+cRWvcOxttbuPw5A34HwP7VySOoz7KAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022320\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFontAwesome provides thousands of icons, but you probably only use a few dozen on your website. Instead of loading all of them as a webfont, you could use SVG sprites.\u003C\/p\u003E\n\u003Cp\u003EThis library is a simple helper that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eregisters the icons you use in the place you use it,\u003C\/li\u003E\n\u003Cli\u003Edumps a refined set of SVG symbols at the end of your page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EYou can check out \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E a blog post\u003C\/a\u003E about possible gains.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022900\u0022 height=\u0022600\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHvElEQVRIiX2X249lx1XGf+tStfc53eecnpnunhmPPZM4IRDZxEqUCEsWionkXARGuSiJAlKAB3gIykP+BN554wGBeIaniJdcpKBEJJESCQIi4DjOKA4ztmdsy\/b07fTpPnvvqsXDPjNGEKW0b9Ku2vXV99Va69ty\/R2PRZSKEEStEBVzp5ZCEKgIroapktzpujW1VoiACAQQEYSxiQgiAgT3W0RszvrgTlREQEUwd0yEppngEUJEUGpBAgQopSCMH1bVEago1EpSZdhMgMimHw\/6iwAIqvL25HL\/WYhaEDUi3h5nCEkNrQW\/P0BQgkoEaAii42SEoOqAMJSKIShCiGKqGzbGhSDju82xuRjuRtf1iEDEuEARRTdjTRU3I6niIQq1bAgeGSECCUHVcFNMBBPFTZGo1FqptYwfcB9XXyuq9kAqFSFqJQgWOzsc3jsAKoQgDlELqgIBZkoyI\/l9QAKoQN2wJSCiGxkMRTEzsiWmTQMxsDo7o3GnSU72RK2VUgaGUkAY90utAFy9vM\/6ZAnUkbQIVPMGlGI6SpxNcdFERI+EgVT0wSYV1Gyk1hIqioqh4mw1W1yYLDhYHqGhRAkaT6hniEKIMAz9yJDAjevXee3WS4gEEmAqCAEkRGIjmZJMcU2ZIdhEjN2PFVAd2VHD1MjuZEsohkiiyYl37m1zulqy7nsuX9mnO1uxPD7BRMiu1Kg89dEP8+LzLzDPDUGMkQWojqKogggkU7IbHpqQtJELoQaYKKqGiuLmuBrZMy5CMidJImnDxYsLPv3Hn+XihR3++avf5OXbL2PNNsnHaJottnnqIx\/mJ9\/9ATvtBChExAhGBRUwE0xH1twFJzfI4NQaG30BFFFDzREx3BzVhJttzsTTn\/htvvDnn+fmj37K1\/7qH0gU3nP1IaJWTk6XeDb+8C++wo\/+8Rs8PJ\/TlZ4aAxFllE430ZXGPZSTYgou7Ra1L0itYx4KQAwRRy2RzFE1kjltykzd+ZMvfYaPfepplgcnfONvvkbWCRemLe9690OcHr3J0eqcj3z5D0gq1Nuv8BtX91merTgfOkodKLUHrSQ3zAR3JbmQkuEynSPdAKUSMO4RFJGEiiGeyOq0KTFNiS988Rk+9qmnAfjP7z9HomG2PWN72nBy74wbH3wfH332Kbxt+OFf\/h37uws0eo6Og2FIlBgBhVRUg5QddyElxbPgMplBHqCAhEIogoI4aMLUSebklHjiiXfy+5\/7nQcl4fj1JZcu73Htxj43HnuERz7wKFu7cyKCl7\/1PbYmmVK3aZuB3FSQSo2eYeiI2qMGqoG5kRvHk+DMFjAUImQEE2N0GY5rQnFkkwC\/+GefeJCZAT7+p8\/wf1tEcOd7\/0b3xpvsveMS66NMf3rIXHvEKmJBrT11WCMMqAnmSsoZbxpcZzNSYawzKB5Kwsji5DCyGhnlA09c59q1i\/8PwP9utRRe\/Kd\/5eTmi7RbSruYsvfehxmOtjh+VVDpEHqQTJSESB0jLDmWM9ZM8NnOjFKADUOG4OG0YrQoLUZThSd\/692\/EszyjSOe\/\/oP6N56g0kDKPRnK1Zv9bh0TBcNtS9j7jFQSchGLnXHcos2E\/zKxQnDENQCNRQNRTFSCAmjDaUpwnse3f2lQM6OV\/zs+89x599fIEvPpK1j6agQPdS1QaPkiRJJMYmNTAk1xVJGc4OkBvIEf3y\/YXXe060L3VAppVJqRUKQqFgRTITdC9MHIE6XZ9y+eYdbP\/4Fd37y3zTRM\/VCpIJTyVoJDbCAbqyVkoLkgZtgJmhKSG4hGeQMuQFv8Wcv3OX0vLJc9hyfVpZDcLKGVQfnPXSDUAb427\/+e85Ozzh885jTe8fkUkgUEpVWKxMb2ErBvK100wqzIIXQ2mgzpPSoB5YNq0HfG8aMfm1omzg6mNLTIk8\/thvzNnF+Plql3Uv71FAOjleEJPCWviqeW87WHagjoriOWXuscUY2oVHYynB1d5tJOeHqhcKV\/cSF3Sk3f36HLoJOV8z2r\/Ddb\/8Lt15dM28r+\/sz1n3ww+dPke2di6EpI2pYSnzy2d\/j3r0DtGnZ2p6xf+kSP\/vFLd73+OPcvfMKbs6VvV3WXeVkeU6TWy4t5rSeSVJZbE1YvnbA9Ucu0h2+xbVrl2i1RxkwGdhuKw8\/Ehy+2XF6tMQOb+IysPfkM6z+6zvIh\/7oS9FszxkqtFszbly9wlBhb2fB6XrgoYs7rLseN6OUSpSKRXB0suLKYpvV8ozSD0xTgmGgW51zeb7F3nxKPVkyb53FvKWeHrI1nzC1jkd\/fY\/EAS\/99FUmwwGND0wuXybPF3jBWK7OwBLdyQnPLU8B5aYZEsJz7hsvBFIqlIrUSj0\/58e1kM2QEkgEVguJ0Rtv54YtN2buLJrENAmuhWmGN+7e5UO\/OefWS4fUKMwnMDu8y699\/P34we2f0\/U96plaKt5M4O1\/CATwlFBVJIKogcYIQGtFhuGBwa\/9Ghfj8PWXaHOLi7DYnnNpvoNHZbU65sJ8xn+84Lx2e8LrR+fceuucSQ4a7fjd4RVk913vjVoKQ9dR+zVpa4aEULpzNDVjOagDnluA0XMDWgNFkLjvoUcvrhEIFRPBVXABpZLNUA2GoUco7M+cRWvcOxttbuPw5A34HwP7VySOoz7KAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022900\u0022 height=\u0022600\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFontAwesome provides thousands of icons, but you probably only use a few dozen on your website. Instead of loading all of them as a webfont, you could use SVG sprites.\u003C\/p\u003E\n\u003Cp\u003EThis library is a simple helper that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eregisters the icons you use in the place you use it,\u003C\/li\u003E\n\u003Cli\u003Edumps a refined set of SVG symbols at the end of your page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EYou can check out \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E a blog post\u003C\/a\u003E about possible gains.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["fontawesome","optimise","font","webfont","icons","symfony","twig","php","js"],"hasMore":false,"image":"https:\/\/avris.it\/image\/fontawesomeoptimiser_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022160\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFontAwesome provides thousands of icons, but you probably only use a few dozen on your website. Instead of loading all of them as a webfont, you could use SVG sprites.\u003C\/p\u003E\n\u003Cp\u003EThis library is a simple helper that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eregisters the icons you use in the place you use it,\u003C\/li\u003E\n\u003Cli\u003Edumps a refined set of SVG symbols at the end of your page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EYou can check out \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome.lite\u0022\u003E a blog post\u003C\/a\u003E about possible gains.\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesomeoptimiser_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022160\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFontAwesome provides thousands of icons, but you probably only use a few dozen on your website. Instead of loading all of them as a webfont, you could use SVG sprites.\u003C\/p\u003E\n\u003Cp\u003EThis library is a simple helper that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eregisters the icons you use in the place you use it,\u003C\/li\u003E\n\u003Cli\u003Edumps a refined set of SVG symbols at the end of your page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EYou can check out \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome.lite\u0022\u003E a blog post\u003C\/a\u003E about possible gains.\u003C\/p\u003E","words":71,"readTime":null,"lang":"en"}}}}}