Font Awesome and Unicode Characters Materialize

Question

I am using google's css framework materialize which is really nice.

This framework has its own select element which dynamically changes to ul.

I am also using the fontawesome icons css framework and my idea is to put an icon in the select as follows

<select name="note[type]">
   <option value="1"><i class="fa fa-car"></i>Car</option>
</select>

But it does not display the icon on the other hand if i write:  instead of the <i> tag it gets displayed correctly (note that is not the actual code of the car icon).

So my question is: I fill the icons dynamically from the database, is there a way that from the icon class such as fa-car you get the unicode character via php/javascript?

Thanks and Regards

Here is a related post: http://stackoverflow.com/questions/31549631/programmatically-get-fontawesome-unicode-value-by-name. It suggests using the window.getComputedStyle function — Nadir Latif, Apr 08 '17 at 06:13

Combinu · Accepted Answer · 2017-04-11T13:26:59.730

I have solved this in my own way here is the answer for those who might have my problem:

First of all on StackOverflow i found how to breakcss to an array using this function:

private function BreakCSS($css)
{

    $results = array();

    preg_match_all('/(.+?)\s?\{\s?(.+?)\s?\}/', $css, $matches);
    foreach($matches[0] AS $i=>$original)
        foreach(explode(';', $matches[2][$i]) AS $attr)
            if (strlen(trim($attr)) > 0) // for missing semicolon on last element, which is legal
            {
                list($name, $value) = explode(':', $attr);
                $results[$matches[1][$i]][trim($name)] = trim($value);
            }
    return $results;
}

I loaded all the fontawesome code using file_get_contents and passed it to BreakCss.

All as below:

public function GetIcon($icon)
{
    $icon = $icon.":before";
    $fa = file_get_contents(A_CSS.DIRECTORY_SEPARATOR."font-awesome.min.css");
    $arr = $this->BreakCSS($fa);
    $char = "";
    foreach($arr as $selector=>$style)
    {
        if (strpos($selector, $icon))
        {
            $char = str_replace("\\", "&#x", str_replace("\"", "", $style['content'])).";";
        }
    }
    return $char;
}

Usage GetIcon("fa-car");

Hope this helps!

Font Awesome and Unicode Characters Materialize

1 Answers1