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?

prestonc9992104
Level 2
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
prestonc9992104
Correct answer by
Level 2
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
prestonc9992104
Level 2
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.

prestonc9992104
Correct answer by
Level 2
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