Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Font Awesome Pro Alternate Styles.

Font Awesome Pro and light/Regular/Duotone icons
normally, we use fa-[fontname] in the icon.

I purchased and was able to integrate the pro icon set in the application, but if I use fa-[iconname] I am only given the fa (standard free version) of the icon.
Is there wa a way to change the class from fa fa-[iconname] to for example, fal fa-[iconname]?
see this site for the class prefixes:
https://fontawesome.com/how-to-use/on...
1 person has
this question
+1
Reply
  • I've tried putting the classes in the icon/custom style field but since the other "has icon" classes aren't present in the parent element, and the ::before element isn't included, the fal tag doesn't work.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated

  • 2
    Hi,

    I recently wanted to do the same thing, mainly to use the Duotone versions. Here is what I did in case it may help someone (don't forget to do a backup copy of the modified files) :

    1/ I suppose that you have already downloaded the fontawesome-pro for web and placed the all.min.css file in the CSS folder of your project. I personally also renamed it to "fontawesome-pro-all.min.css".
    Copy also all the webfonts to the fonts folder of your project.
    Now open the newly copied "all.min.css" to correct the mentioned urls at the end of the file. For that I did a batch find and replace, changing "url(../webfonts/" to "url(../fonts/".

    2/ I Added this to a custom CSS file of my project (adapted from what I found on "/css/daf/touch.min.css")
    .app-icon.fad,
    .app-icon.fad::before,
    .app-icon.fal,
    .app-icon.fal::before,
    .app-icon.far,
    .app-icon.far::before,
    .app-icon.fas,
    .app-icon.fas::before
    {
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
    }
    .app-page-header .app-icon.fad,
    .app-page-header .app-icon.fad::before,
    .app-page-header .app-icon.fal,
    .app-page-header .app-icon.fal::before,
    .app-page-header .app-icon.far,
    .app-page-header .app-icon.far::before,
    .app-page-header .app-icon.fas,
    .app-page-header .app-icon.fas::before
    {
        width: 40px;
        height: 40px;
        font-size: 40px;
        line-height: 40px;
    }

    3/ Then I Changed the "touch.js" file in "\Documents\Code OnTime\Library\Premium\Mobile\" 
    Note that I have the COT Premium version, so your file may be somewhere else, like in the Unlimited folder.

    3.A / I replaced this (line 29):
    materialIconRegex = /\b(((material\-icon|glyphicons|glyphicon|fa|ion)\-([\w\-]+?)))(\s|$|,)/g,
    By this : 
    materialIconRegex = /\b(((material\-icon|glyphicons|glyphicon|fa|fas|far|fal|fad|fab|ion)\-([\w\-]+?)))(\s|$|,)/g,

    3.B / and this (starting line 3653):
        function iconIsMaterial(icon) {
            return icon && typeof icon == 'string' && icon.match(/^(material\-icon|glyphicons|glyphicon|fa|ion)\-.+/);
        }
        function materialIcon(icon, parent) {
            var m = icon.match(/^(material\-icon|glyphicons|glyphicon|fa|ion)\-(.+)/);
            if (!m) return null;
            var
                font = m[1],
                supportsLigatures = font == 'material-icon';
            return $('<i class="app-icon ' + font + ' ' + m[0] + '" aria-hidden="true">' + (supportsLigatures ? m[2].replace(/\-/g, '_') : '') + '</i>').appendTo(parent.addClass('app-has-icon app-has-' + font));
        }
    By this : 
        function iconIsMaterial(icon) {
            return icon && typeof icon == 'string' && icon.match(/^(material\-icon|glyphicons|glyphicon|fa|fas|far|fal|fad|fab|ion)\-.+/);
        }
        function materialIcon(icon, parent) {
            var m = icon.match(/^(material\-icon|glyphicons|glyphicon|fa|fas|far|fal|fad|fab|ion)\-(.+)/);
            if (!m) return null;
            var
                font = m[1],
                supportsLigatures = font == 'material-icon',
    fontawesome = icon.match(/^(fa|fas|far|fal|fad|fab)\-(.+)/);
            return $('<i class="app-icon ' + font + ' ' + (fontawesome ? 'fa-' + m[2] : m[0] ) + '" aria-hidden="true">' + (supportsLigatures ? m[2].replace(/\-/g, '_') : '') + '</i>').appendTo(parent.addClass('app-has-icon app-has-' + (fontawesome ? 'fa' : font )));
        }

    4/ Then I minified this "touch.js" file to regenerate the "touch.js" file in "\Documents\Code OnTime\Library\Data Aquarium\Mobile", using Microsoft Ajax Mignifier (installed by COT).
    To do that I executed the following command in Windows command prompt :
    "C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\ajaxmin.exe" -hc -clobber:True -term "C:\Users\%UserName%\Documents\Code OnTime\Library\Premium\Mobile\touch.js" -o "C:\Users\%UserName%\Documents\Code OnTime\Library\Data Aquarium\Mobile\touch.js"

    5/ Finally, whithin COT Project manager, instead of using fa-[iconname] you could now use fad-[iconname] for the Duotone Version, or fas|far|fal|fad|fab depending on your needs.

    6/ Don't forget to refresh and regenerate your project, COT should then copy the newly created js files from its library and use them for your project.


  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated