Icon inside gutter


#1

Hello, dear programmers

I am new to atom.

I installed one package (I don’ think it’s very important right now since I tried some of them). And wanted to “tweak” it a bit. That package added one more gutter to the editor to show the committer of the line. I wanted to add icon to every line produced by package (<span class="icon icon-clippy"></span>) but to my surprise it didn’t show at all. When inspecting this element the devtools showed me that no .icon or .icon-clippy classes were applied to the span element.

What am I doing wrong?


#2

Are you using the Decorations API? I’m not sure how that will work with the second gutter … but this is generally how one decorates a line or other chunk of code.


#3

yes that API mentioned by you is used there as well, but nothing helps. I even tried to set the class manually in devTools console, but no luck


#4

Where are you checking for the span to exist? If you’re looking for it on the text lines themselves, it won’t be there because decorations are placed on a separate layer.


#5

Ok, frankly speaking, I don’t know how answer your question, but I will explain what I did.

I cloned atom repo. Compiled all the .less files into one .css. I found that .icon is global class it doesn’t inherit from anything.

Then I opened devtools and tried to add .icon class to different elements (in gutter, in editor, in search form etc.) but… nothing happend. I didn’t see any icon :cry: It might be because of my poor knowledge in css.


#6

Yeah, it doesn’t really work like that. Different Less files can be loaded in different contexts. You may also be running into a Shadow DOM issue. See the FAQ here:


#7

Hm… Thanks for your help. Will see, what I can do with this info


#8

Atom provides LESS mixins for the octicons. Combined with the link @leedohm provided, the following code should give you icons in the text editor:

@import "octicon-mixins";

atom-text-editor::shadow {
  .my-awesome-octicon {
    .octicon(octoface);
  }
}

Then you can add the my-awesome-octicon class to any element in the text editor to get your awesome icon :smile:

If you’re planning on doing a package it’s easier (and the recommended way of doing this): you use .atom-text-editor.less instead of just .less for the file extension and the file will be loaded into each text editor’s shadow DOM. Then you should also drop the outer atom-text-editor::shadow block from the snippet above.


#9

Perfect, thanks. That what I was looking for