::before CSS .fa-u...">

Access FontAwesome unicode as a class

When checking an element, suppose I have this HTML.

<i class="fa fa-user">
   ::before
</i>

CSS

.fa-user::before {
    content: "\f007";
}

Here I get the contents of fa-user

    $('.fa-user').each(function(){
        var unicode = window.getComputedStyle(this,':before').content;
        console.log(unicode);
    });

The problem is that the unicode variable is displayed as an icon (symbol).

enter image description here

I want it to be the line → "\ f007"

I also tried this, but it just returns some unrelated number, in this case it is the number 22

var unicode = window.getComputedStyle(this,':before').content.charCodeAt(0).toString(16);

+4
source share
1 answer

Some browsers wrap the value in .contentquotation marks ( see here ). You must remove them before receiving the first character:

$('.fa-user').each(function() {
  var unicode = window.getComputedStyle(this, ':before').content
                                                        .replace(/'|"/g, '') // <-----
                                                        .charCodeAt(0)
                                                        .toString(16);
  console.log("\\" + unicode);
});
.fa-user::before { content: "\f007"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-user"></i>
Run codeHide result
+4
source

Source: https://habr.com/ru/post/1675351/


All Articles