Home > other >  How can I know from where font icon originate?
How can I know from where font icon originate?

Time:10-05

I have following font icon style, but clearly "Icon" is not a 3rd party producer, like FontAwesome. how can I know from where I can buy the collection?

.dropdown-submenu > a:after, .menu-side .dropdown > a:after, .mega-dropdown > a:after, .menu-inner .dropdown > a:after, .menu-cnt > ul > li.dropdown > a:after {
    font-family: "Icons";
    content: "\67";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    right: 10px;
    transition: transform .5s;
    text-transform: none;
    opacity: .7;
}

It is used here in the menu for ">" character.

http://themes.framework-y.com/codrop/chat/

CodePudding user response:

It's a custom font so it could be anything, but there are a few things you could do to get more information.

First, check where the "Icons" font family is declared in the CSS. In Chrome, open devtools, select the item you want to inspect (in your case it's the ::after pseudo element in the <a> tag. You'll see the file where the font is declared next to the CSS selector. Do a text search on that file and you'll find:

@font-face {
    font-family: "Icons";
    src: url('../media/icons/icons.eot');
    src: url('../media/icons/icons.eot?#iefix-rdmvgc') format('embedded-opentype'), url('../media/icons/icons.woff') format('woff'), url('../media/icons/icons.ttf') format('truetype'), url('../media/icons/icons.svg?-rdmvgc#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then, go to the "Network" tab, refresh the page and look for a file named "icons". From there you may get the file URL and download it.

Once you have it locally you may inspect it in an online tool like https://fontdrop.info/ to see all the glyphs (I recognized a few FontAwesome icons). Also, you can get the glyph names in there and it may be worth Googling them.

Also, if you look at the URL of the font file: /codrop/chat/wp-content/plugins/hybrid-composer/media/icons/icons.woff you may infer that the file is probably a part of some WordPress plugin named Hybrid Composer.

Another bit of information you could look for are file metadata - depends on your OS and on the file type.

Lastly, there are online tools that allow you to get font information from an image - upload a PDF or a screenshot of a font and it'll try to figure out what font it is. Although I never found that solution to be accurate.

  •  Tags:  
  • css
  • Related