Li: Before Content: "✔ "; Different Color on Some Mobile Devices

Cannot assign color to content attribute in before pseudo selector in Safari of iPad

Safari mobile having font problem, to fix it you can use FontAwesome. It's using the same pseudo but it worked (because of its font):

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-check:before {
    content: "\f00c";
}

Fiddle: https://jsfiddle.net/ydmt80g7/27/

Heavy Check Mark Not Showing In Email As It Does In HTML

It looks like the only option is to use ... None of the above would work specific to my needs.

I did need to use the following code, but none of the other options (div and such) would work for email.

✓

Here is the Jinja used ... put them together:

Header
Style
template
footer

Here is the code...

JINJA_HDR = """<!DOCTYPE html>
    <html lang=\"en-US\">"""

JINJA_FTR = """</html>"""

def get_style():
    """

    """

    html_style = """<style>
            table.greenCisco {
              border: 2px solid #005C21;
              background-color: #6CC04A;
              width: 100%;
              text-align: center;
              border-collapse: collapse;
            }
            tr:nth-child(even) {
                background: #ABC233;
            }
            tr:nth-child(odd) {
                background: #6CC04A;
            }
            table.greenCisco td, table.greenCisco th {
              border: 2px solid #000000;
              padding: 3px 2px;
            }
            table.greenCisco tbody td {
                color: #FFFFFF;
            }
            table.greenCisco thead {
              background: #005C21;
              border-bottom: 1px solid #444444;
            }
            table.greenCisco thead th {
              font-size: 15px;
              font-weight: bold;
              color: #FFFFFF;
              text-align: center;
              border-left: 2px solid #D0E4F5;
            }
            table.blueTable tfoot {
              font-size: 13px;
              font-weight: bold;
              color: #FFFFFF;
              background: #D0E4F5;
              text-align: center;
              border-top: 2px solid #444444;
            }
        </style>"""

    return html_style

def get_Jinja(df_list:list):
    """
    This function takes in a list of DataFrames and returns 
    a Jinja parsed string of table data used in email.

    """

    # skipping checking the input for now - kkeeton 20190122
    jinja_tmplt = """{% for html_CI in html_CI_list %}
        {% set columns = html_CI.tech_DF.columns.values[1:] %}
        <h1>{{ html_CI.tech_grp }}</h1><br/>
        <table class="greenCisco">
            <thead>
                <tr>
                {% for col_hdr in columns %}
                    <th>{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    {% set row_num = loop.index0 %}
                    {% if row_num % 2 == 0 %}
                        <tr bgcolor="#ABC233">
                    {% else %}
                        <tr bgcolor="#6CC04A">
                    {% endif %}
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            {% if elem_data == 0 %}
                                <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
                            {% elif elem_data == 1 %}
                                <td><div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
                            {% elif elem_data == 2 %}
                                <td><div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
            <tfoot valign="center">
                <tr colspan="0"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>Complete</b></tr>
            </tfoot>
        </table>
    {% endfor %}"""

    return jinja_tmplt

Display phone number in black color in ios devices

<meta name="format-detection" content="telephone=no"> resolved my problem

How to draw a checkmark / tick using CSS?

You can now include web fonts and even shrink down the file size with just the glyphs you need.
https://github.com/fontello/fontello
http://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}

How to use tick / checkmark symbol (✓) instead of bullets in unordered list?

You can use a pseudo-element to insert that character before each list item:

ul {  list-style: none;}
ul li:before {  content: '✓';}

<ul>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li></ul>