Gelert
23 November 2018 15:08
1
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';
Gelert
28 November 2018 09:51
3
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
Gelert
28 November 2018 10:59
5
Thank you, another great tip.
This post should probably be moved over to SS4 Tips & Tricks so others can find it as well.
Gelert
28 November 2018 16:13
9
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
28 November 2018 11:39
6
2 Likes
Gelert
28 November 2018 16:27
10
PR submitted to the Documentation page.
JonoM
28 November 2018 15:24
7
@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): DSM - InVision
1 Like
JonoM
28 November 2018 15:26
8
@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.