Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

Theme svg

Theme svg

The SVG icon attached to the theme is used as an icon for the paragraph block or heading block, or list block (unnumbered list) by adding the class name to the advanced / additional CSS class of the block editor. can do. Reflect the class name by simply pasting it into a paragraph block.

In addition, adding a hanging-indent class makes it easier to place icons.
Please try it once

Example usage with list block

  • hello world
  • hello world
  • hello world
IconBlock Editor Additional CSS Class Name
ico-lock
ico-lock icon-cool
ico-lock icon-notice
ico-lock icon-info
ico-lock icon-alert
ico-lock icon-dark
ico-embed
ico-embed icon-cool
ico-embed icon-notice
ico-embed icon-info
ico-embed icon-alert
ico-embed icon-dark
ico-bell
ico-bell icon-cool
ico-bell icon-notice
ico-bell icon-info
ico-bell icon-alert
ico-bell icon-dark
ico-location
ico-location icon-cool
ico-location icon-notice
ico-location icon-info
ico-location icon-alert
ico-location icon-dark
ico-pdf
ico-pdf icon-cool
ico-pdf icon-notice
ico-pdf icon-info
ico-pdf icon-alert
ico-pdf icon-dark
ico-zip
ico-zip icon-cool
ico-zip icon-notice
ico-zip icon-info
ico-zip icon-alert
ico-zip icon-dark
ico-html5
ico-html5 icon-cool
ico-html5 icon-notice
ico-html5 icon-info
ico-html5 icon-alert
ico-html5 icon-dark
ico-category
ico-category icon-cool
ico-category icon-notice
ico-category icon-info
ico-category icon-alert
ico-category icon-dark
ico-tag
ico-tag icon-cool
ico-tag icon-notice
ico-tag icon-info
ico-tag icon-alert
ico-tag icon-dark
ico-clock
ico-clock icon-cool
ico-clock icon-notice
ico-clock icon-info
ico-clock icon-alert
ico-clock icon-dark
ico-contrast
ico-contrast icon-cool
ico-contrast icon-notice
ico-contrast icon-info
ico-contrast icon-alert
ico-contrast icon-dark
ico-home
ico-home icon-cool
ico-home icon-notice
ico-home icon-info
ico-home icon-alert
ico-home icon-dark
ico-bookmark
ico-bookmark icon-cool
ico-bookmark icon-notice
ico-bookmark icon-info
ico-bookmark icon-alert
ico-bookmark icon-dark
ico-quote
ico-quote icon-cool
ico-quote icon-notice
ico-quote icon-info
ico-quote icon-alert
ico-quote icon-dark
ico-edit
ico-edit icon-cool
ico-edit icon-notice
ico-edit icon-info
ico-edit icon-alert
ico-edit icon-dark
ico-web
ico-web icon-cool
ico-web icon-notice
ico-web icon-info
ico-web icon-alert
ico-web icon-dark
ico-human
ico-human icon-cool
ico-human icon-notice
ico-human icon-info
ico-human icon-alert
ico-human icon-dark
ico-new-tab
ico-new-tab icon-cool
ico-new-tab icon-notice
ico-new-tab icon-info
ico-new-tab icon-alert
ico-new-tab icon-dark
ico-checkbox_checked
ico-checkbox_checked icon-cool
ico-checkbox_checked icon-notice
ico-checkbox_checked icon-info
ico-checkbox_checked icon-alert
ico-checkbox_checked icon-dark
ico-checkbox
ico-checkbox icon-cool
ico-checkbox icon-notice
ico-checkbox icon-info
ico-checkbox icon-alert
ico-checkbox icon-dark
ico-radio_checked
ico-radio_checked icon-cool
ico-radio_checked icon-notice
ico-radio_checked icon-info
ico-radio_checked icon-alert
ico-radio_checked icon-dark
ico-radio
ico-radio icon-cool
ico-radio icon-notice
ico-radio icon-info
ico-radio icon-alert
ico-radio icon-dark
ico-notice
ico-notice icon-cool
ico-notice icon-notice
ico-notice icon-info
ico-notice icon-alert
ico-notice icon-dark
ico-info
ico-info icon-cool
ico-info icon-notice
ico-info icon-info
ico-info icon-alert
ico-info icon-dark
ico-block
ico-block icon-cool
ico-block icon-notice
ico-block icon-info
ico-block icon-alert
ico-block icon-dark
ico-icon-deviantart
ico-icon-deviantart icon-cool
ico-icon-deviantart icon-notice
ico-icon-deviantart icon-info
ico-icon-deviantart icon-alert
ico-icon-deviantart icon-dark
ico-icon-medium
ico-icon-medium icon-cool
ico-icon-medium icon-notice
ico-icon-medium icon-info
ico-icon-medium icon-alert
ico-icon-medium icon-dark
ico-icon-slideshare
ico-icon-slideshare icon-cool
ico-icon-slideshare icon-notice
ico-icon-slideshare icon-info
ico-icon-slideshare icon-alert
ico-icon-slideshare icon-dark
ico-icon-snapchat-ghost
ico-icon-snapchat-ghost icon-cool
ico-icon-snapchat-ghost icon-notice
ico-icon-snapchat-ghost icon-info
ico-icon-snapchat-ghost icon-alert
ico-icon-snapchat-ghost icon-dark
ico-icon-yelp
ico-icon-yelp icon-cool
ico-icon-yelp icon-notice
ico-icon-yelp icon-info
ico-icon-yelp icon-alert
ico-icon-yelp icon-dark
ico-icon-vine
ico-icon-vine icon-cool
ico-icon-vine icon-notice
ico-icon-vine icon-info
ico-icon-vine icon-alert
ico-icon-vine icon-dark
ico-icon-vk
ico-icon-vk icon-cool
ico-icon-vk icon-notice
ico-icon-vk icon-info
ico-icon-vk icon-alert
ico-icon-vk icon-dark
ico-icon-search
ico-icon-search icon-cool
ico-icon-search icon-notice
ico-icon-search icon-info
ico-icon-search icon-alert
ico-icon-search icon-dark
ico-icon-envelope-o
ico-icon-envelope-o icon-cool
ico-icon-envelope-o icon-notice
ico-icon-envelope-o icon-info
ico-icon-envelope-o icon-alert
ico-icon-envelope-o icon-dark
ico-icon-close
ico-icon-close icon-cool
ico-icon-close icon-notice
ico-icon-close icon-info
ico-icon-close icon-alert
ico-icon-close icon-dark
ico-icon-angle-down
ico-icon-angle-down icon-cool
ico-icon-angle-down icon-notice
ico-icon-angle-down icon-info
ico-icon-angle-down icon-alert
ico-icon-angle-down icon-dark
ico-icon-folder-open
ico-icon-folder-open icon-cool
ico-icon-folder-open icon-notice
ico-icon-folder-open icon-info
ico-icon-folder-open icon-alert
ico-icon-folder-open icon-dark
ico-icon-twitter
ico-icon-twitter icon-cool
ico-icon-twitter icon-notice
ico-icon-twitter icon-info
ico-icon-twitter icon-alert
ico-icon-twitter icon-dark
ico-icon-facebook
ico-icon-facebook icon-cool
ico-icon-facebook icon-notice
ico-icon-facebook icon-info
ico-icon-facebook icon-alert
ico-icon-facebook icon-dark
ico-icon-github
ico-icon-github icon-cool
ico-icon-github icon-notice
ico-icon-github icon-info
ico-icon-github icon-alert
ico-icon-github icon-dark
ico-icon-bars
ico-icon-bars icon-cool
ico-icon-bars icon-notice
ico-icon-bars icon-info
ico-icon-bars icon-alert
ico-icon-bars icon-dark
ico-icon-google-plus
ico-icon-google-plus icon-cool
ico-icon-google-plus icon-notice
ico-icon-google-plus icon-info
ico-icon-google-plus icon-alert
ico-icon-google-plus icon-dark
ico-icon-linkedin
ico-icon-linkedin icon-cool
ico-icon-linkedin icon-notice
ico-icon-linkedin icon-info
ico-icon-linkedin icon-alert
ico-icon-linkedin icon-dark
ico-icon-quote-right
ico-icon-quote-right icon-cool
ico-icon-quote-right icon-notice
ico-icon-quote-right icon-info
ico-icon-quote-right icon-alert
ico-icon-quote-right icon-dark
ico-icon-mail-reply
ico-icon-mail-reply icon-cool
ico-icon-mail-reply icon-notice
ico-icon-mail-reply icon-info
ico-icon-mail-reply icon-alert
ico-icon-mail-reply icon-dark
ico-icon-youtube
ico-icon-youtube icon-cool
ico-icon-youtube icon-notice
ico-icon-youtube icon-info
ico-icon-youtube icon-alert
ico-icon-youtube icon-dark
ico-icon-dropbox
ico-icon-dropbox icon-cool
ico-icon-dropbox icon-notice
ico-icon-dropbox icon-info
ico-icon-dropbox icon-alert
ico-icon-dropbox icon-dark
ico-icon-instagram
ico-icon-instagram icon-cool
ico-icon-instagram icon-notice
ico-icon-instagram icon-info
ico-icon-instagram icon-alert
ico-icon-instagram icon-dark
ico-icon-flickr
ico-icon-flickr icon-cool
ico-icon-flickr icon-notice
ico-icon-flickr icon-info
ico-icon-flickr icon-alert
ico-icon-flickr icon-dark
ico-icon-tumblr
ico-icon-tumblr icon-cool
ico-icon-tumblr icon-notice
ico-icon-tumblr icon-info
ico-icon-tumblr icon-alert
ico-icon-tumblr icon-dark
ico-icon-dockerhub
ico-icon-dockerhub icon-cool
ico-icon-dockerhub icon-notice
ico-icon-dockerhub icon-info
ico-icon-dockerhub icon-alert
ico-icon-dockerhub icon-dark
ico-icon-dribbble
ico-icon-dribbble icon-cool
ico-icon-dribbble icon-notice
ico-icon-dribbble icon-info
ico-icon-dribbble icon-alert
ico-icon-dribbble icon-dark
ico-icon-skype
ico-icon-skype icon-cool
ico-icon-skype icon-notice
ico-icon-skype icon-info
ico-icon-skype icon-alert
ico-icon-skype icon-dark
ico-icon-foursquare
ico-icon-foursquare icon-cool
ico-icon-foursquare icon-notice
ico-icon-foursquare icon-info
ico-icon-foursquare icon-alert
ico-icon-foursquare icon-dark
ico-icon-wordpress
ico-icon-wordpress icon-cool
ico-icon-wordpress icon-notice
ico-icon-wordpress icon-info
ico-icon-wordpress icon-alert
ico-icon-wordpress icon-dark
ico-icon-stumbleupon
ico-icon-stumbleupon icon-cool
ico-icon-stumbleupon icon-notice
ico-icon-stumbleupon icon-info
ico-icon-stumbleupon icon-alert
ico-icon-stumbleupon icon-dark
ico-icon-digg
ico-icon-digg icon-cool
ico-icon-digg icon-notice
ico-icon-digg icon-info
ico-icon-digg icon-alert
ico-icon-digg icon-dark
ico-icon-spotify
ico-icon-spotify icon-cool
ico-icon-spotify icon-notice
ico-icon-spotify icon-info
ico-icon-spotify icon-alert
ico-icon-spotify icon-dark
ico-icon-soundcloud
ico-icon-soundcloud icon-cool
ico-icon-soundcloud icon-notice
ico-icon-soundcloud icon-info
ico-icon-soundcloud icon-alert
ico-icon-soundcloud icon-dark
ico-icon-codepen
ico-icon-codepen icon-cool
ico-icon-codepen icon-notice
ico-icon-codepen icon-info
ico-icon-codepen icon-alert
ico-icon-codepen icon-dark
ico-icon-twitch
ico-icon-twitch icon-cool
ico-icon-twitch icon-notice
ico-icon-twitch icon-info
ico-icon-twitch icon-alert
ico-icon-twitch icon-dark
ico-icon-meanpath
ico-icon-meanpath icon-cool
ico-icon-meanpath icon-notice
ico-icon-meanpath icon-info
ico-icon-meanpath icon-alert
ico-icon-meanpath icon-dark
ico-icon-pinterest-p
ico-icon-pinterest-p icon-cool
ico-icon-pinterest-p icon-notice
ico-icon-pinterest-p icon-info
ico-icon-pinterest-p icon-alert
ico-icon-pinterest-p icon-dark
ico-icon-periscope
ico-icon-periscope icon-cool
ico-icon-periscope icon-notice
ico-icon-periscope icon-info
ico-icon-periscope icon-alert
ico-icon-periscope icon-dark
ico-icon-get-pocket
ico-icon-get-pocket icon-cool
ico-icon-get-pocket icon-notice
ico-icon-get-pocket icon-info
ico-icon-get-pocket icon-alert
ico-icon-get-pocket icon-dark
ico-icon-vimeo
ico-icon-vimeo icon-cool
ico-icon-vimeo icon-notice
ico-icon-vimeo icon-info
ico-icon-vimeo icon-alert
ico-icon-vimeo icon-dark
ico-icon-reddit-alien
ico-icon-reddit-alien icon-cool
ico-icon-reddit-alien icon-notice
ico-icon-reddit-alien icon-info
ico-icon-reddit-alien icon-alert
ico-icon-reddit-alien icon-dark
ico-icon-hashtag
ico-icon-hashtag icon-cool
ico-icon-hashtag icon-notice
ico-icon-hashtag icon-info
ico-icon-hashtag icon-alert
ico-icon-hashtag icon-dark
ico-icon-chain
ico-icon-chain icon-cool
ico-icon-chain icon-notice
ico-icon-chain icon-info
ico-icon-chain icon-alert
ico-icon-chain icon-dark
ico-icon-thumb-tack
ico-icon-thumb-tack icon-cool
ico-icon-thumb-tack icon-notice
ico-icon-thumb-tack icon-info
ico-icon-thumb-tack icon-alert
ico-icon-thumb-tack icon-dark
ico-icon-arrow-left
ico-icon-arrow-left icon-cool
ico-icon-arrow-left icon-notice
ico-icon-arrow-left icon-info
ico-icon-arrow-left icon-alert
ico-icon-arrow-left icon-dark
ico-icon-arrow-right
ico-icon-arrow-right icon-cool
ico-icon-arrow-right icon-notice
ico-icon-arrow-right icon-info
ico-icon-arrow-right icon-alert
ico-icon-arrow-right icon-dark
ico-icon-play
ico-icon-play icon-cool
ico-icon-play icon-notice
ico-icon-play icon-info
ico-icon-play icon-alert
ico-icon-play icon-dark
ico-icon-pause
ico-icon-pause icon-cool
ico-icon-pause icon-notice
ico-icon-pause icon-info
ico-icon-pause icon-alert
ico-icon-pause icon-dark
ico-icon-phone
ico-icon-phone icon-cool
ico-icon-phone icon-notice
ico-icon-phone icon-info
ico-icon-phone icon-alert
ico-icon-phone icon-dark
ico-icon-email
ico-icon-email icon-cool
ico-icon-email icon-notice
ico-icon-email icon-info
ico-icon-email icon-alert
ico-icon-email icon-dark
ico-icon-rss
ico-icon-rss icon-cool
ico-icon-rss icon-notice
ico-icon-rss icon-info
ico-icon-rss icon-alert
ico-icon-rss icon-dark
ico-icon-amazon
ico-icon-amazon icon-cool
ico-icon-amazon icon-notice
ico-icon-amazon icon-info
ico-icon-amazon icon-alert
ico-icon-amazon icon-dark