Question 219297 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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";
}
    Login or Signup to reply.
  2. 0

    As explained by Tim R: it’s an icon font.

    You can extract seperate svgs from the font using an icon generator like icomoon.

    1. download the svg font file
      https://netrunnerdb.com/fonts/netrunner.svg
      (Found in @font-face rule)

    2. import it
      enter image description here

    3. select glyphs/icons

    4. export all icon

    enter image description here

    If there is no svg font file available, you can convert a woff2, woff or truetype to svg font via a tool like transfonter. and convert this file via icomoon.

    Alternatively, you can also directly convert a woff2, woff or ttr file using opentype.js as explained here "How to convert font icon to .svg by myself?"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search