The IcoMoon fonts were distributed with Joomla 3.x and used with the Isis administrator template. When J! 4.x was released, the developers decided to use FontAwesome fonts instead of IcoMoon. That’s just a matter of history. There could be any number of reasons why people might want to use IcoMoon fonts with Joomla 4.xI used the IcoMoon font-family to create the content of the modal pop-up in the demonstration A simple pop-up modal. but doesn’t matter if we’re discussing IcoMoon fonts or any other font family: the principles of self-hosted webfontssee How to host your own webfonts are just the same and can be used with Cassiopeia or any other template. This article will show you how to host any font you like and we’re using the IcoMoon font files included with Joomla 3.x as an example.
What you need to salvage from J! 3.x to be able to use Icomoon fonts
If you look at a J! 3.x file system you will find the files that are used to render text using the Icomoon font-family. These files are located in the ../media/jui folder. You will not need all of these files, just the ones shown in the image on the right.
Preparing your J! 4.x website to use Icomoon fonts
- Extract these files and store them on your PC using the same folder structure as the original.
- Create a sub-folder in your J! 4.x website names ../media/vendor/icomoon and upload the two folders you stored on your PC named css and fonts (and their contents) under that. Your .css file will be ../media/vendor/icomoon/css/icomoon.css and the font files will be in the folder ../media/vendor/icomoon/fonts/.
- Edit your custom CSS fileSee this excellent tutorial that shows you how to create a custom CSS file for Cassiopeia: https://ltheme.com/create-custom-css-with-cassiopeia/ and add the following line at the beginning of that file:
That’s it! You can now use the Icomoon font-family with Cassiopeia.