Search code examples
cssweb-scrapingicons

How do download CSS Icon from website that is not an image i can right-click

I'm trying to download the set icons associated with the different expansions of the game Netrunner. I can see the icons at https://netrunnerdb.com/en/sets, next to each set there is an icon. When i inspect it, it seems to just be a span with a CSS class with the icon name. My goal is to find or create SVGs of these icons, so if the website already has these in a vector format it would help me out a lot.

I cannot right click and save it, i cannot highlight it. So i'm not sure how the icon is being rendered. Is it a custom font the website is serving?

This is all i see when I inspect it:

enter image description here

Solution

  • Is it a custom font the website is serving?

    Yes. Click on the ::before in Developer Tools and you'll see:

    .icon-flashpoint:before {    netrunnerfont.css:96
    content: "\e921";
}

    Click on the stylesheet and you'll see:

    @font-face {
  font-family: 'netrunner';
  src:  url('fonts/netrunner.eot?cmdd12');
  src:  url('fonts/netrunner.eot?cmdd12#iefix') format('embedded-opentype'),
    url('fonts/netrunner.ttf?cmdd12') format('truetype'),
    url('fonts/netrunner.woff?cmdd12') format('woff'),
    url('fonts/netrunner.svg?cmdd12#netrunner') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'netrunner' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

...

.icon-flashpoint:before {
  content: "\e921";
}