I got working font awesome icons so they show on the admin side as they were not showing the icons before and the first row shows the icons correctly but if I click add row, they are not showing the icons again but if I save it and go back into it, the icons show, it's a weird one, I have attached a screenshot of the issue. Has anyone else had that issue?

The code I have is below

Code: Select all
<cms:editable name='services_welcome_section' label='Services/Welcome Section' type='group' collapsed='1' order='2'>
<cms:repeatable name='multiple_icons_services' label='Services Icons' group='services_welcome_section' order='1'>
<cms:editable name='multiple_icon' label='Service Icon' order='0' dynamic='opt_values' opt_values='font-awesome-icons.html' type='dropdown'/>
<cms:editable type='text' name='service_name' label='Service Name' group='services_welcome_section' />
</cms:repeatable>
</cms:editable>
   
<cms:editable name='icons_assets' type='message' order='5'>
<link href="addons/chosen/chosen.css" rel="stylesheet" type="text/css">
<link href="<cms:show k_site_link/>font-awesome/css/font-awesome.min.css" rel="stylesheet">
   
<style>
            #f_single_icon ~ .chosen-container,
            select[id$=-multiple_icon] ~ .chosen-container {
                width: 100% !important;
                min-width: 240px;
                font-family: FontAwesome, "Helvetica Neue", Arial, sans-serif;
                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() {
                $("#f_single_icon, #f_multiple_icons_services select[id$=-multiple_icon]").chosen();

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


Code: Select all
<cms:show_repeatable 'multiple_icons_services'>
            <cms:set my_count="<cms:zebra '1' '2' '3' '4' />" />
      <i class="fa fa-<cms:show multiple_icon/> green" aria-hidden="true"></i> <cms:show service_name/>
            <cms:if my_count='4' || k_count=k_total_records>
                <br>
                </cms:if>
        </cms:show_repeatable>


UPDATE: Sorry solved it, I had one of the names differently

Attachments