Is there anyway to use iconfont icons or stacked font awesome icons in couchcms?

Is there also a updated list of font awesome html list to use in couchcms as I got the files from here viewtopic.php?p=11162#p11162 but unsure what version it's using so was seeing if there was a updated list to use as think font awesome is now on version 5

Think I may be getting somewhere with iconfont. I have created a html file called iconfonts.html with the following code and placed it in the snippets folder

Code: Select all

-- Select Icon --=-| icon-mail-black=icon-mail-black| icon-mouse-scroll=icon-mouse-scroll|

and then in my index.php file I have the following

Code: Select all

<cms:editable name='computer_repair_section' label='Computer Repair Section' type='group' collapsed='1' order='7'>
<cms:repeatable name='computer_repair_boxes_icons' label='Computer Repair Boxes Icons' group='computer_repair_section'>
<cms:editable name='box_icon' label='Box Icon' order='0' dynamic='opt_values' opt_values='iconfonts.html' type='dropdown' />
</cms:repeatable>
</cms:editable>

<cms:editable name='icons_assets' type='message' order='8'>
<link href="addons/chosen/chosen.css" rel="stylesheet" type="text/css">

<style>

@font-face {
  font-family: 'computer';
  src:  url('http://www.domain.co.uk/iconfont/fonts/computer.eot?pkh0gr');
  src:  url('http://www.domain.co.uk/iconfont/fonts/computer.eot?pkh0gr#iefix') format('embedded-opentype'),
    url('fhttp://www.domain.co.uk/iconfont/onts/computer.ttf?pkh0gr') format('truetype'),
    url('http://www.domain.co.uk/iconfont/fonts/computer.woff?pkh0gr') format('woff'),
    url('http://www.domain.co.uk/iconfont/fonts/computer.svg?pkh0gr#computer') format('svg');
  font-weight: normal;
  font-style: normal;
}
         .icon- ~ .chosen-container,
            #f_single_icon ~ .chosen-container,
            select[id$=-box_icon] ~ .chosen-container {
                width: 100% !important;
                min-width: 240px;
                font-family: 'computer' !important;
                font-size: 14px;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .chosen-container ~ .select-caret { display: none; }
            .chosen-container > a { font-weight: normal; }

            .tableholder { overflow: visible; }
        </style>
        
        <script src="addons/chosen/chosen.jquery.min.js"></script>
        
<script>
            $(function() {
                $(".icon-, #f_single_icon, #f_computer_repair_boxes_icons select[id$=-box_icon]").chosen();

                $("#addRow_f_computer_repair_boxes_icons").on("click", function() {
                    $("#f_computer_repair_boxes_icons select[id$=-box_icon]:last").chosen();
                });
            });
        </script>
        
</cms:editable>

On the admin side I got the list showing but is not in the right order

Be cool if can get this working and seeing if anyone can help and just see where I have gone wrong with it. I have attached a couple of screenshots showing the issues

I think the issue is with the iconfonts.html file in the snippets folder as to why the icons are not matching up right but I have done it in the same format as the font-awesome-icons.html file so unsure on this one. Below is what I have in iconfonts.html

Code: Select all

-- Select Icon --=-| icon-mail-black=icon-mail-black| icon-mouse-scroll=icon-mouse-scroll| icon-apple=icon-apple| icon-notebook-and-mouse-cursor=icon-notebook-and-mouse-cursor|

Think I have just sussed it, I have amended iconfonts.html file to the following format and is working now

Code: Select all

-- Select Icon --=-| icon-mail-black=icon-mail-black| icon-mouse-scroll=icon-mouse-scroll| icon-apple=icon-apple| icon-notebook-and-mouse-cursor=icon-notebook-and-mouse-cursor

I also amended the line below as well in my index.php file

Code: Select all

[class^="icon-"] ~ .chosen-container, [class*=" icon-"] ~ .chosen-container,

so the line above is now with the block of code

Code: Select all

[class^="icon-"] ~ .chosen-container, [class*=" icon-"] ~ .chosen-container,
select[id$=-box_icons] ~ .chosen-container {
                width: 100% !important;
                min-width: 240px;
                font-family: 'computer' !important;
                font-size: 14px;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
            }

Hopefully the above can help others out if need to use iconfont or any other icons as a alternative to font awesome. If it helps, I have attached the zip file containing the list of the icons I have in my iconfonts.html file as just finished typing it out