Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Level 2

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.

View solution in original post

3 Replies

Avatar

Level 2

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.

Avatar

Correct answer by
Level 2

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.