diff --git a/docs/_markbind/variables.md b/docs/_markbind/variables.md
index 9facd789e3..8c9000d134 100644
--- a/docs/_markbind/variables.md
+++ b/docs/_markbind/variables.md
@@ -8,8 +8,8 @@
 
 <variable name="icon_arrow_down">:fas-arrow-down:</variable>
 <variable name="icon_arrow_right">:fas-arrow-right:</variable>
-<variable name="icon_check_blue"><font color="{{ markbind_blue }}">:fas-check-circle:</font></variable>
-<variable name="icon_bulb_blue"><font color="{{ markbind_blue }}">:fas-lightbulb:</font></variable>
+<variable name="icon_check_blue"><span style="color: {{ markbind_blue }}">:fas-check-circle:</span></variable>
+<variable name="icon_bulb_blue"><span style="color: {{ markbind_blue }}">:fas-lightbulb</span></variable>
 <variable name="icon_dislike">:fas-thumbs-down:</variable>
 <variable name="icon_example"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Example:</span></big></variable>
 <variable name="icon_examples"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Examples:</span></big></variable>
diff --git a/docs/userGuide/syntax/icons.mbdf b/docs/userGuide/syntax/icons.mbdf
index 8a10dd0848..b8cb519d89 100644
--- a/docs/userGuide/syntax/icons.mbdf
+++ b/docs/userGuide/syntax/icons.mbdf
@@ -7,8 +7,8 @@ MarkBind supports using Font Icons provided by Font Awesome and Glyphicons.
 <include src="tip.md" boilerplate >
 <span id="tip_body">
 The advantage of font icons over emojis is font icons can be _styled_ to fit your needs. e.g.,
-* emoji: <font color="purple">Don't judge the :book: by it's cover! :-1:</font>
-* font icons: <font color="purple">Don't judge the :fas-book: by it's cover! :fas-thumbs-down:</font>
+* emoji: <span style="color: purple">Don't judge the :book: by it's cover! :-1:</span>
+* font icons: <span style="color: purple">Don't judge the :fas-book: by it's cover! {{ icon_dislike }}</span>
 </span>
 </include>
 
@@ -43,5 +43,5 @@ Please use the new :prefix-name: syntax instead.
 
 <span id="examples" class="d-none">
 
-:glyphicon-hand-right: :fab-github: :fas-home: %%:glyphicon-hand-right: :fab-github: :fas-home:%% <font color="red">:glyphicon-hand-right: :fab-github: :fas-home:</font>
+:glyphicon-hand-right: :fab-github: :fas-home: %%:glyphicon-hand-right: :fab-github: :fas-home:%% <span style="color: red">:glyphicon-hand-right: :fab-github: :fas-home:</span>
 </span>
\ No newline at end of file