Forum for discussing general topics related to Couch.
17 posts Page 2 of 2
I couldn't spot the page you mentioned being linked to font-awesome anywhere.

Please place the following first in the <head> block of your template -
Code: Select all
<link href="<cms:show k_site_link/>font-awesome/css/font-awesome.min.css" rel="stylesheet">

or use a CDN version as follows -
Code: Select all
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Next to test out things, place the following somewhere in your template's body -
Code: Select all
<h1>fa fa-check-square</h1>

<i class="fa fa-check-square"></i>
<i class="fa fa-check-square" style="font-size:24px"></i>
<i class="fa fa-check-square" style="font-size:36px;"></i>
<i class="fa fa-check-square" style="font-size:48px;color:red"></i>
<br>

You should see the 'check' icon.

If that works, try replacing, as @cheesypoof suggested, the 'check-square' parts from the code with your Couch code fetching value from the database e.g.
Code: Select all
<h1>fa fa-check-square</h1>

<i class="fa fa-<cms:show single_icon/>"></i>
<i class="fa fa-<cms:show single_icon/>" style="font-size:24px"></i>
<i class="fa fa-<cms:show single_icon/>" style="font-size:36px;"></i>
<i class="fa fa-<cms:show single_icon/>" style="font-size:48px;color:red"></i>
<br>

Hopefully this should clear things up for you.
I have put the test coding in KK but don't see it yet on the front end, is there a way to clear the cache, I have tried ctrl and F5 and also cleared the cache in my firefoxe browser history tab, sorry I am also logged in as super admin in couchcms admin side
It cannot be a caching issue as caching is always turned off for admins (logged-in users, to be precise).

Anyway, the link to font-awesome.min.css can now be seen in the page's source but the <li> code is no where to be seen,
Also, I don't quite understand why that "check-square-o" is appearing in the source *above* <!DOCTYPE html>.

I think there is some mistake in the way you are using the snippets.
Please post (attach) your template's code (make sure it includes the test <li> with font-awesome somewhere) along with any snippets it uses.
Hi

Sorry for just replying, below is the whole code I have on the index.php file where I want the font awesome icon to show

Code: Select all
<?php require_once( 'cms/cms.php' ); ?>
<cms:template title='Home Page' />

<cms:editable name='single_icon' label='Single Icon' order='0' dynamic='opt_values' opt_values='font-awesome-icons.html' required='1' type='dropdown'/>

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

    <cms:editable name='icons_assets' type='message' order='20'>
        <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 select[id$=-multiple_icon]").chosen();

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

<?php
$title = "Primecare Physiotherapy Clinic";

$pgDesc="";

$pgKeywords="";

include ( 'includes/header.php' );
?>

<section>
         <!-- CAROUSEL -->     
         <div id="carousel">
            <div id="owl-demo" class="owl-carousel owl-theme">
               <div class="item">
                  <img src="img/slideshow/physio-1.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               <div class="item">
                  <img src="img/slideshow/physio-2.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               <div class="item">
                  <img src="img/slideshow/physio-3.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               
               <div class="item">
                  <img src="img/slideshow/physio-4.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               
               <div class="item">
                  <img src="img/slideshow/physio-5.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               
               <div class="item">
                  <img src="img/slideshow/physio-6.jpg" alt="">     
                  <div class="carousel-text">
                     <div class="line">
                        <div class="s-12 l-9">
                        </div>
                        <div class="s-12 l-9">
                           
                        </div>
                     </div>
                  </div>
               </div>
               
            </div>
         </div>
         
         <!-- SECOND BLOCK -->    
         <div id="second-block">
            <div class="line">
               <div class="margin-bottom">
                  <div class="margin">
                     <article class="s-12 l-12 center">
                        <p class="margin-bottom">
                        <cms:editable name='section_one_home_content' type='richtext'>
                        We at Primecare have an in-depth knowledge of Anatomy, Physiology, Biomechanics, Pathology, Sports medicine, Cognitive Behavioural therapy and Pain. We provide comprehensive assessment of your condition and offer quick and long lasting relief of your pain and symptoms. We tailor make treatment plans specific to your needs. No matter how your pain has come about, you deserve prompt, effective and quality treatment at affordable price. This is exactly what we offer at Primecare Physiotherapy clinic. We believe in not only curing your pain but also preventing re-occurrence.
<br /><br />
We will see you at the clinic, at home or in your work environment and make sure you return pain free to your sport, work and social activity at the earliest.
<br /><br/>
We are recognised by AXA, BUPA, WPA and by most major insurance companies. If you have a private medical insurance, we will deal directly with your insurance company without hassling you for invoices.
<br /><br />
If you are self funding for your treatments then choose us as we offer very competitive and affordable prices. We offer appointments within 24 hours of you making a contact with us.

<h1>fa fa-check-square</h1>

<i class="fa fa-check-square"></i>
<i class="fa fa-check-square" style="font-size:24px"></i>
<i class="fa fa-check-square" style="font-size:36px;"></i>
<i class="fa fa-check-square" style="font-size:48px;color:red"></i>
<br>

</cms:editable>
                        </p>
                        </article>
                       
                        <div style="clear: both;">&nbsp;</div>
                       
                        <div class="s-12 m-6 l-4 margin-bottom">
                        <cms:editable name='section_two_home_content' type='richtext'>
               <h4 class="treatments">Our Services</h4>
               <p class="margin-bottom">
               <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; MSK Physiotherapy
               <br />
               <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Acupuncture
               <br />
               <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Massage
               <br />
               <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Sports Physiotherapy
               <br />
               <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Cortisone Injections
               <br />
              <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Prescriptions &amp; Medications review
               <br />
              <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Ultrasound scan &amp; guided injections
               <br />
              <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Biomechanical &amp; ergonomic assessments
  </cms:editable>
               </p>
               </div>
               
               <div class="s-12 m-6 l-4 margin-bottom">
               <cms:editable name='section_three_home_content' type='richtext'>
               <h4 class="treatments">We Offer</h4>
               <p class="margin-bottom">
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Professional Team of Experienced Chartered Physiotherapists
               <br />
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Prompt and flexible Appointments
               <br />
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; 'Hands On'  and Evidence Based Treatments
               <br />
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Individual and Holistic Care
</cms:editable>
               </p>
               </div>
               
               <div class="s-12 m-6 l-4 margin-bottom">
               <cms:editable name='section_four_home_content' type='richtext'>
               <h4 class="treatments">Our Promise to You...</h4>
               <p class="margin-bottom">
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Immediate access to affordable and professional physiotherapy care
            <br />
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Assessment &amp; treatment from experienced Chartered Physiotherapists
            <br />
            <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; No waiting list: our aim is to see patients within 24hrs of enquiry
</cms:editable>
               </p>
               </div>
               
                  </div>
               </div>
            </div>
         </div>
         
         <!-- FIRST BLOCK -->    
         <div id="first-block">
            <div class="line">
            <cms:editable name='section_five_title_home_content' type='richtext'>
               <h2>Primecare Physiotherapy Clinic</h2>
               </cms:editable>
               <div class="margin">
                  <div class="s-12 m-6 l-3 margin-bottom">
                     <i class="icon-paperplane_ico icon2x"></i>
                     <cms:editable name='section_six_home_content' type='richtext'>
                     <h3>Clinic</h3>
                     <p>
                     Primecare Physiotherapy Clinics are a well established clinics since 2009. We have a team of experienced practitioners offering a range of treatments to improve your well being and help you get back to your desired level of fitness.
                     </cms:editable>
                     </p>
                  </div>
                  <div class="s-12 m-6 l-3 margin-bottom">
                     <i class="icon-star icon2x"></i>
                     <cms:editable name='section_seven_home_content' type='richtext'>
                     <h3>Private</h3>
                     <p>
                     No matter how your pain has come about, you deserve prompt, effective and quality treatment at affordable price. This is exactly what we offer at Primecare Physiotherapy clinic. We are able to see you both at your home or at one of our clinic centres.
                     </cms:editable>
                     </p>
                  </div>
                  <div class="s-12 m-6 l-3 margin-bottom">
                     <i class="icon-message icon2x"></i>
                     <cms:editable name='section_eight_home_content' type='richtext'>
                     <h3>Carehomes</h3>
                     <p>
                     We provide physiotherapy services in residential and nursing homes. If you would like our services then please <a href="contact.php">contact us</a>.
                     </cms:editable>
                     </p>
                  </div>
                  <div class="s-12 m-6 l-3 margin-bottom">
                     <i class="icon-mail icon2x"></i>
                     <cms:editable name='section_nine_home_content' type='richtext'>
                     <h3>Medical/Legal</h3>
                     <p>
                     We can help with assessment and rehabilitation after a traumatic or a road traffic injury, and with your consent can send rehabilitation reports to your solicitors dealing with your case.
                     </cms:editable>
                     </p>
                  </div>
               </div>
            </div>
         </div>
         <!-- GALLERY -->    
         <div id="third-block">
            <div class="line">
               <div class="margin">
               <cms:editable name='section_ten_home_content' type='richtext'>
                  <div class="s-12 m-6 l-five">
                     <img src="img/home-images/bupa.jpg" alt="">
                  </div>
                  <div class="s-12 m-6 l-five">
                     <img src="img/home-images/aviva.jpg" alt="">
                  </div>
                  <div class="s-12 m-6 l-five">
                     <img src="img/home-images/simplyhealth.jpg" alt="">
                  </div>
                  <div class="s-12 m-6 l-five">
                     <img src="img/home-images/hpc.jpg" alt="">
                  </div>
                  <div class="s-12 m-6 l-five">
                     <img src="img/home-images/csp.jpg" alt="">
                  </div>
                  </cms:editable>
               </div>
            </div>
         </div>
      </section>

<?php include( 'includes/footer.php' ); ?>
<?php COUCH::invoke(); ?>


below is my code from the includes/header.php file

Code: Select all
<!DOCTYPE html>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $pgDesc ?>"/>
<meta name="keywords" content="<?php echo $pgKeywords ?>"/>
      <link rel="stylesheet" href="css/components.css">
      <link rel="stylesheet" href="css/icons.css">
      <link rel="stylesheet" href="css/responsee.css">
      <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
      <link rel="stylesheet" href="owl-carousel/owl.theme.css">
      <!-- CUSTOM STYLE -->
      <link rel="stylesheet" href="css/template-style.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
      <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui.min.js"></script>
      <script type="text/javascript" src="http://www.primecarephysio.co.uk/calendare/js/calendarcall.js"></script>
     
      <script src="./email-form-scripts/validation.js" type="text/javascript"></script>
     
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       
   </head>
   <body class="size-1140">
      <!-- TOP NAV WITH LOGO -->           
      <header>
     
      <div id="topbar">
            <div class="line">
               <div class="s-12 m-6 l-12">
                    <div class="social right">
                  <p class="header-text">
                  CONTACT US: <strong>07863 159404</strong>
                  <br>
                  EMAIL: <strong>c_rahul@hotmail.com</strong>
                  <br>
              <a href="contact.php" class="action-button shadow animate blue">Book Now</a>
                  </p>
                  </div>
                  <a href="index.php"><img src="img/logo/primecare-physiotherapy-clinic.jpg" alt="" title=""></a>
               </div>
            </div> 
         </div>
               
         <nav>
            <div class="line">
               <div class="top-nav">
                  <p class="nav-text">Menu</p>
                  <div class="top-nav s-12 l-12">
                     <ul class="right top-ul chevron">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">About Us</a>
                        <ul>
                        <li><a href="our-mission.php">Our Mission</a></li>
                        <li><a href="our-team.php">Our Team</a></li>
                        </ul>
                        </li>
                        <li><a href="what-we-treat.php">What We Treat</a></li>
                        <li><a href="treatments.php">Treatments</a></li>
                        <li><a href="specialist-treatment.php">Specialist Treatment</a></li>
                        <li><a href="our-clinics.php">Clinics</a></li>
                        <!--<li><a href="book-appointment.php">Book an Appointment</a></li>-->
                        <li><a href="faqs.php">FAQ's</a></li>
                        <li><a href="testimonials.php">Testimonials</a></li>
                        <li><a href="contact.php">Contact</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </nav>
      </header>
Hi

Just seeing if there is any update as the client is on my back about the check icons not showing on the front end and also they are not showing on the admin side now either where as I am sure they used to be, I am lost as to why they are not showing, can anyone help me please
I'll try to explain what you are doing wrong Ian.

Looking at your site, I can see that the following three sections (lists) are the ones you are struggling to get fontawsome to work with -
Untitled-1.png
Untitled-1.png (31.81 KiB) Viewed 2473 times

The way you have currently coded up the template, you have simply wrapped each of the three lists into a type richtext <cms:editable> e.g. the following for 'Our Services' -
Code: Select all
<cms:editable name='section_two_home_content' type='richtext'>
    <h4 class="treatments">Our Services</h4>
    <p class="margin-bottom">
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; MSK Physiotherapy
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Acupuncture
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Massage
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Sports Physiotherapy
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Cortisone Injections
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Prescriptions &amp; Medications review
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Ultrasound scan &amp; guided injections
    <br />
    <i class="fa fa-<cms:show single_icon/>"></i> &nbsp; Biomechanical &amp; ergonomic assessments
</cms:editable>

If you think about it a bit, you'll understand why this approach is not going to work the way you envisage.

By making the entire list editable, you are allowing the client to edit the *entire* enclosed code from the admin-panel.
While editing, the client is not likely to go into the 'source' of the editor and manually add the "fa-xxx" class to the <LI>s.
Therefore, whatever new HTML generated for the list by CKEditor will not have the fontawesome classes and the icons will not show up.

Hopefully with the problem understood, I'll now try to outline the plan that should work.
Instead of making the entire list editable, as you have done, make *each* <LI> editable instead.

The way to do this is by the use of repeatable-regions.
Taking the example of 'section_two_home_content' region above, first delete the existing type richtext region.
Then within the <cms:template> block, create a repeatable-region of the same name and define within it two child regions -
1.
Code: Select all
<cms:editable name='single_icon' label='Single Icon' order='0' dynamic='opt_values' opt_values='font-awesome-icons.html' required='1' type='dropdown'/>

2.
Code: Select all
<cms:editable name='my_text' label='Text' type='textarea' />

The client can now add each 'row' of the list individually, selecting the icon for it and entering the text.

On the front-end, use <cms:show_repeatable> to loop through the inputted rows to create the <LI>s with the icons and text.

Repeat the above with the other two lists too.

And that is all that I can help you with.
You'll have to implement it yourself. In case you still have trouble doing so, I suggest you please hire somebody from the the forum to get it done for you.

Thanks.
Hi KK

I think I understand the issue so have altered it and got the font awesome icons showing in the admin side and removed the first lot of services as a list and made it a textarea but it is not showing on the front end

in my index.php I have the following code

Code: Select all
<div class="s-12 m-6 l-4 margin-bottom">
               <h4 class="treatments">Our Services</h4>
               <cms:repeatable name='font_awesome' >
                        <cms:editable name='font_awesome' label='Text' type='textarea' />
                        </cms:repeatable>
               <p class="margin-bottom">
               <cms:show_repeatable 'font_awesome' >
                    </cms:show_repeatable>
                       
                        </p>
               </div>


I have attached a screenshot of the admin side that I have

I think I might need to hire someone to do it if I can;t get it working, would you be able to do it if I paid you KK

Attachments

17 posts Page 2 of 2