ModelAdmin - SS4.2.2. $menu_icon help?

Silverstripe Version: 4.2.2

Question:

I can’t get

private static $menu_icon = 'path/to/modeladmin/news-icon.png';

to work in a ModelAdmin class whatever I try.

I looked up the API documentation and there’s a mistake in the menu_icon_for_class method for Example: static $menu-icon = ‘/path/to/image/’;

It definitely is not menu-icon as that doesn’t exist.

What seems to happen is that the CSS in Left and Main icon for the ModelAdmin gets modified to…

class = "menu__icon font-icon-circle-star font-icon-my-namespace-mymodeladminclass"

…rather than use the image path provided.

However if you put an image path that does not exist on the filesystem you also get a fatal error.

Does anyone know how to customise the ModelAdmin icons?

The documentation page for it says 16x16 pixel images so that’s what I made.

https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/how_tos/customise_cms_menu/

Now that my SS4 project is almost finished I wanted to begin tarting it up a bit so it looked nice as well.

You can specify the menu icon class in your extended ModelAdmin class.

 private static $menu_icon_class = 'fa fa-users';

Thanks @sparkcom you are indeed correct.

However SilverStripe 4 doesn’t appear to be using Font Awesome but by using the browser inspector on the class that altered when I used your line of code I was able to find the built in list of available icons from the CSS.

I can’t find them documented anywhere but they all work.

.font-icon-search
.font-icon-sync
.font-icon-print
.font-icon-list
.font-icon-plus-circled
.font-icon-check-mark-2
.font-icon-book
.font-icon-book-open
.font-icon-plus
.font-icon-tree
.font-icon-flow-tree
.font-icon-info-circled
.font-icon-chart-line
.font-icon-graph-bar
.font-icon-torsos-all
.font-icon-torso
.font-icon-chart-pie
.font-icon-sitemap
.font-icon-globe-1
.font-icon-chat
.font-icon-comment
.font-icon-logout
.font-icon-cancel-circled
.font-icon-left-open
.font-icon-right-open
.font-icon-check-mark
.font-icon-check-mark-circle
.font-icon-back-in-time
.font-icon-cog
.font-icon-fast-forward
.font-icon-install
.font-icon-down-circled
.font-icon-eye
.font-icon-columns
.font-icon-edit-write
.font-icon-monitor
.font-icon-mobile
.font-icon-tablet
.font-icon-pencil
.font-icon-trash
.font-icon-edit
.font-icon-tick
.font-icon-upload
.font-icon-thumbnails
.font-icon-down-open
.font-icon-up-open
.font-icon-link
.font-icon-level-up
.font-icon-image
.font-icon-trash-bin
.font-icon-left-open-big
.font-icon-down-open-big
.font-icon-up-open-big
.font-icon-right-open-big
.font-icon-save
.font-icon-rocket
.font-icon-cancel
.font-icon-happy
.font-icon-sad
.font-icon-angle-double-right
.font-icon-angle-double-left
.font-icon-angle-right
.font-icon-angle-left
.font-icon-caret-up-down
.font-icon-caret-down-two
.font-icon-caret-up-two
.font-icon-right-dir
.font-icon-down-dir
.font-icon-link-broken
.font-icon-switch
.font-icon-resize
.font-icon-menu
.font-icon-edit-list
.font-icon-help-circled
.font-icon-icon-enlarge
.font-icon-page-multiple
.font-icon-database
.font-icon-attention
.font-icon-block
.font-icon-up-circled
.font-icon-clock
.font-icon-spinner
.font-icon-menu-campaigns
.font-icon-menu-files
.font-icon-menu-help
.font-icon-menu-modaladmin
.font-icon-menu-pages
.font-icon-menu-reports
.font-icon-menu-security
.font-icon-menu-settings
.font-icon-silverstripe
.font-icon-sort
.font-icon-lock
.font-icon-cross-mark
.font-icon-folder-add
.font-icon-drag-handle
.font-icon-safari
.font-icon-folder-move
.font-icon-clipboard-pencil
.font-icon-picture
.font-icon-sliders
.font-icon-white-question
.font-icon-home
.font-icon-block-back
.font-icon-block-banner
.font-icon-block-carousel
.font-icon-block-content
.font-icon-block-file
.font-icon-block-file-list
.font-icon-block-form
.font-icon-block-layout
.font-icon-block-media
.font-icon-tag
.font-icon-tags
.font-icon-checklist
.font-icon-export
.font-icon-box
.font-icon-language
.font-icon-globe
.font-icon-eye-with-line
.font-icon-translatable
.font-icon-pulse
.font-icon-dot-3
.font-icon-code
.font-icon-external-link
.font-icon-explore-addons
.font-icon-share
.font-icon-calendar
.font-icon-universal-access
.font-icon-cart
.font-icon-credit-card
.font-icon-news
.font-icon-p-event
.font-icon-p-event-alt
.font-icon-p-article
.font-icon-p-articles
.font-icon-p-document
.font-icon-p-code
.font-icon-p-error
.font-icon-p-cart
.font-icon-p-list
.font-icon-p-archive
.font-icon-p-news-item
.font-icon-p-multi
.font-icon-page
.font-icon-p-a
.font-icon-p-a-b
.font-icon-p-alt
.font-icon-p-shield-off
.font-icon-p-shield
.font-icon-p-posts
.font-icon-p-home
.font-icon-p-gallery-alt
.font-icon-p-gallery
.font-icon-p-data
.font-icon-p-b
.font-icon-p-vitual
.font-icon-p-alt-2
.font-icon-p-alt-3
.font-icon-p-profile
.font-icon-p-attachment
.font-icon-p-download
.font-icon-p-search
.font-icon-p-mail
.font-icon-p-map
.font-icon-p-redirect
.font-icon-p-post
.font-icon-p-shop
.font-icon-p-book
.font-icon-p-package
.font-icon-p-blocked
.font-icon-circle-star
.font-icon-sun
.font-icon-accessibility

You can include font awesome css in your theme.yml file

SilverStripe\Admin\LeftAndMain:
  extra_requirements_css:
    - themes/yourthemefolder/dist/font-awesome/css/font-awesome.min.css
2 Likes

Thank you, another great tip.

This post should probably be moved over to SS4 Tips & Tricks :slight_smile: so others can find it as well.

This might be handy for you :slight_smile:

https://silverstripe-fonts.dorset-digital.net/

2 Likes

Actually I do think I’ve seen the Design Systems Manager page before.

Because ModelAdmin menu icon class is undocumented nobody would know to join up the dots though!

I will have a stab at updating the ModelAdmin documentation page.

@Tim That’s awesome! Bookmarking that one.

@Gelert I think this is the closest thing to official documentation for icons (it was mentioned in a blog post once): https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/folder/icons/5b7544214aef740016152cf1

1 Like

PR submitted to the Documentation page.

@Gelert perhaps you want to create a new post over there instead, summarising the takeaways from this discussion so readers can jump straight to the good stuff.