Octicon in LESS stylesheet


#1

I am trying to implement an octicon in my LESS stylesheets for a UI using the unicode of the icon in the content like the example below. The problem is that the icon doesn’t show up, instead I see a square.

.find-and-replace .find-meta-container {
  top: 4px;

  & span {
    font-size: 10px;
    text-transform: uppercase;

    &::before {
      content: "\f02e";
    }
  }
}

#2

You have to set the font family to use the Octicon font. Whatever the default font is doesn’t have the symbol you’re trying to display.


#3

You have to specify the Octicons font family, otherwise it’ll just inherit it:

.find-and-replace .find-meta-container {
  top: 4px;

  & span {
    font-size: 10px;
    text-transform: uppercase;

    &::before {
      font-family: "Octicons Regular";
      content: "\f02e";
    }
  }
}

Alternatively you can add the class .icon-<icon-name-here> to the element to use the Octicon. You can take a look at the Styleguide (search Command Palette for Styleguide) for more info about how to create some UI elements.


#4

Ah of course! Thanks guys!