diff --git a/htdocs/artefact/comment/lang/en.utf8/artefact.comment.php b/htdocs/artefact/comment/lang/en.utf8/artefact.comment.php
index 0b9d2a60516a13b8ecefc77e543aa42bd1cc211e..687f430637aabef09e196bf63cb942cf09a9e68e 100644
--- a/htdocs/artefact/comment/lang/en.utf8/artefact.comment.php
+++ b/htdocs/artefact/comment/lang/en.utf8/artefact.comment.php
@@ -122,6 +122,7 @@ $string['star'] = 'Star';
 $string['heart'] = 'Heart';
 $string['thumbsup'] = 'Thumbs up';
 $string['ok'] = 'Tick';
+$string['smile'] = 'Smile';
 $string['ratingexample'] = 'Generated example';
 $string['removerating'] = 'Clear ratings';
 $string['ratingoption'] = "Set rating %s out of %s";
diff --git a/htdocs/artefact/comment/lib.php b/htdocs/artefact/comment/lib.php
index e060693ac5f40c48cc16f6623b8b941b91d8de39..de813a46c78424e5bbb2f64e56541cf8752b55f7 100644
--- a/htdocs/artefact/comment/lib.php
+++ b/htdocs/artefact/comment/lib.php
@@ -1123,6 +1123,7 @@ class ArtefactTypeComment extends ArtefactType {
                     'heart' => get_string('heart', 'artefact.comment'),
                     'thumbs-up' => get_string('thumbsup', 'artefact.comment'),
                     'check-circle' => get_string('ok', 'artefact.comment'),
+                    'smile' => get_string('smile', 'artefact.comment'),
                 ),
             ),
             'ratinglength' => array(
diff --git a/htdocs/js/bootstrap-ratings.js b/htdocs/js/bootstrap-ratings.js
index ff5998aa13cca39112a0ad57b1417274396f8196..8b91e63afedc0e3d02b728fea4764e361f5735e3 100644
--- a/htdocs/js/bootstrap-ratings.js
+++ b/htdocs/js/bootstrap-ratings.js
@@ -80,13 +80,8 @@
                     $(this).css('color',settings.coloroff);
                     if (settings.emptyglyph) {
                         if ($(this).hasClass(settings.glyph)) {
-                            // need to add the '-o' before the end for thumbs
-                            if (settings.glyph == 'icon-thumbs-up') {
-                                $(this).removeClass(settings.glyph).addClass('icon-thumbs-o-up');
-                            }
-                            else {
-                                $(this).removeClass(settings.glyph).addClass(settings.glyph + '-o');
-                            }
+                            // need to set any font type difference for the 'not selected' ratings
+                            $(this).addClass('icon-regular');
                         }
                     }
                 }
diff --git a/htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl b/htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl
index 5fa10f4d5187e286dd573b409bc0c358c508a5b6..b430ec43b08f176fcbf7c8f9704ec85c83e4eeca 100644
--- a/htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl
@@ -32,7 +32,9 @@
 
                 <span class="star-comment-rating">
                     {for i $item->ratingdata->min_rating $item->ratingdata->max_rating}
-                        <div class="star-rating star star-rating-applied star-rating-readonly {$star}-rating{if $i <= $item->ratingdata->value}-on{else}-off{/if}"><a {if $colour}style="color: {$colour}"{/if}>&nbsp;</a></div>
+                        <div class="star-rating star-rating-readonly">
+                            <a class="icon icon-{$star} {if $i <= $item->ratingdata->value}icon-solid{else}icon-regular{/if}" {if $colour}style="color: {$colour}"{/if}>&nbsp;</a>
+                        </div>
                     {/for}
                 </span>
                 {/if}
diff --git a/htdocs/theme/raw/sass/lib/_star.scss b/htdocs/theme/raw/sass/lib/_star.scss
index 54833515ec9e1545c6056802b84268adcd6fbb9a..2f3a303cefb3d2d573bcc0a59aa1cc5b934d4ff5 100644
--- a/htdocs/theme/raw/sass/lib/_star.scss
+++ b/htdocs/theme/raw/sass/lib/_star.scss
@@ -98,7 +98,6 @@
 }
 
 .star-rating-readonly {
-    width: 15px;
     a {
        font-size: 15px;
        &:hover {
@@ -108,9 +107,8 @@
 }
 
 .star-comment-rating {
-    float:right;
-    margin: -10px 40% 0 0;
-    padding: 10px 0 0 10px;
+    display: block;
+    padding: 6px 0 6px 0;
 }
 .ratingicon:hover {
     color: theme-color("success") !important;