Icons
Icons
Icons Block Type
This icon set is designed specifically for use with the IHPME website. Icons can be used throughout the block system to identify navigations or emphasize buttons. Consistent usage of icons should be observed to avoid user confusion.
Available Icons
Name | Icon | Notes |
---|---|---|
Attachment | ||
Award | ||
Book | ||
Calendar | ||
Caret: Down | ||
Caret: Left | ||
Caret: Right | ||
Caret: Up | ||
Check | ||
Checklist | ||
Circle: Check | ||
Circle: Help | ||
Circle: Info | ||
Circle: Notice | ||
Circle: Question | ||
Close | ||
Comment | ||
Course: Elective | ||
Course: Required | ||
Description | ||
Download | ||
External Link | ||
Funding | ||
Group/People | ||
Heart/Like | ||
Institute/Building | ||
Library | ||
Link | ||
List | ||
Marker/Location | ||
Mobile Phone | ||
Money | ||
News | ||
Notification | ||
Outlook | ||
Paperclip | ||
Phone | ||
Plus | ||
Profile | ||
Profile: Admin | ||
Profile: Faculty | ||
Profile: Fellow | ||
Profile: Graduate | ||
Profile: Postdoc | ||
Quote | ||
Reply | ||
Research | ||
Roadmap | ||
Search | ||
SGS | ||
Smartphone | ||
Tag | ||
Timetable | ||
Transfer | ||
Warning | ||
Website |
Using the block in WordPress
Adding a block to the page
To add the icon
block, toggle the block inserter and search for the block named icon
. For more information on adding blocks see Getting Started
Editing
If inserting an icon
block directly onto the page, there are several configuration options available in the tooltip edior. Within the tooltip editor, you can select the specific icon to use. There are also six sizes available: default, tiny, small, medium, large, and huge. More often than not, icons will be used as configuration options related to a specific block, then inserted as a standalone object.
Example of button with icon used. [../blocks/buttons.html]
Configuration options
With the icon
block selected in the WordPress editor, the right-hand sidebar will display the following configuration options:
- Styles
- Default: Default icon usage with no background or accent colour
- Bubble: Icon will be surrounded by a block of colour
- Accent Colour: Defines the background colour of the bubble style when selected