Beau Beau - 1 month ago 6
HTML Question

How to copy non-printing pseudo content from a website (what character is this)

There's a little white downward pointing carrot next to "National Menu" in the top left corner of this website. When I inspect the :after element with chrome and firefox the content is just an empty white box. Copying that content seems to be no use, and I can't grab it from the main.css stylesheet either. I'd like to know how to reproduce that carrot, and further I'd love to know how to handle situations like this in the future.

enter image description here

Answer

It's char 59401, but the magic lies in the font

font-family: 'fontello';

http://fontello.com/

That specific icon is http://fontello.com/#search=angle,down

On how to handle this in the future, there are a lot of fonts that are icons. They make it simple to use vector based icons and can be colored like any other font. When you see something similar to

<i class="NameOfLibrary NameOfLibary-IconName"></i>

It's typically an icon font where you can look up the classes

If the icons has been integrated into the main stylesheet and there are no classes to be found, inspect the ::after and find out what font it's using, then look that up

Some popular icon fonts http://fontawesome.io/icons/ http://glyphicons.com/