How does the File Library component load the File and Folder icons?

[prestonc9992104]

I'm trying to understand how the community File Library feature loads the file and folder icons in its list area.  I know each item in the list is either an instance of the "/libs/social/filelibrary/components/hbs/document" component or the "/libs/social/filelibrary/components/hbs/folder" component, specifically their "item.hbs" template.

The appropriate <span> tag in the 'document' and 'folder' components are set with the css class "scf-icon-attachment" or "scf-icon-folder" respectively.  I'm sure that these css classes are what result in the appropriate icon being loaded, but I can't figure out how.  I cannot find a css file that defines an image path for those classes.

Any help with this will be appreciated.  I've only been developing in AEM for six months, so I'm sure there are some general knowledge concepts I'm not aware of that might apply here.

[smacdonald2008]

See these doc topics;

• File Library Feature
• File Library Essentials

[prestonc9992104]

I reviewed those pages again, and while they support the idea that the icons are being loaded through the use of css files, they do not help me identify where the specific path to load an icon is being set.

[prestonc9992104 · Accepted solution]

I've found the answer.  I had not known of the existence of "icon fonts".  The icons are in the font itself and not separate image files.