I have integrated couchcms into a website for a client recently and just looking for advice, is it possible to have font awesome icon on the left and info on the right, this is the url http://www.jamescsinclairphotography.co.uk/contact.php that has what I have already but it's hardcoded in but was thinking if it was possible for the client to choose a font awesome icon for the first line(address line) then show the address and so on

I know how to integrate font awesome so that's not a issue, it's having the font awesome icon on the left and info on right that am unsure of how to do

I was thinking of using repeatable region but unsure if it's possible to do that, in couchcms I was thinking font awesome be the select dropdown and on the same row on the right have input field to enter the info, is it possible to do that?

UPDATE: Sorry I have followed the guide from cheesyproof and looked at icons.php example file to see how it's done along with https://docs.couchcms.com/concepts/repe ... gions.html and looks like I have managed to do it

Update: I need bit of help if someone could quickly look over my coding to see what I have missed as the font awesome icons are not showing in the couchcms side. I had the same issue before and followed what I did last time but the icons are still not showing

My contact.php file has the following coding

Code: Select all

<cms:template title='Contact Page' order='8'>

<cms:repeatable name='multiple_icons_info' label='Multiple Icons Info' order='10'>
<cms:editable name='multiple_icon' label='Icon' order='0' dynamic='opt_values' opt_values='font-awesome-icons.html' type='dropdown'/>
<cms:editable type='text' name='cinfo' label='Contact Info' />
</cms:repeatable>

<link href="addons/chosen/chosen.css" rel="stylesheet" type="text/css">
    
<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_info select[id$=-multiple_icon]").chosen();

                $("#addRow_f_multiple_icons_info").on("click", function() {
                    $("#f_multiple_icons_info select[id$=-multiple_icon]:last").chosen();
                });
            });
        </script>
</cms:template>
<cms:show_repeatable 'multiple_icons_info' >
<i class="fa fa-<cms:show single_icon/>" style="float: left; padding: 5px 5px 0 0;"></i>
<p style="float: left;"><cms:show c_info /></p>
</cms:show_repeatable>

I have attached a screenshot of the couchcms side of how it currently looks

In my includes/header.php I have

Code: Select all

<link href="<cms:show k_site_link/>font-awesome/css/font-awesome.min.css" rel="stylesheet">

UPDATE: Sorry got it working, I missed a line of code out when I looked at the icons.php example again and my contact.php file and got the icons showing in the select dropdown now on the couchcms side