|
1 | 1 | # Iconography |
2 | 2 |
|
3 | | -<!-- {% raw %} --> |
4 | | - |
5 | 3 | ## Overview |
6 | 4 |
|
7 | | -PageBuilder Admin icons follow the same design principles as the core [Magento Admin icons]. |
8 | | -They are simple, flat, and monochromatic to prevent the loss of detail at smaller sizes and makes the shapes easier to comprehend. |
| 5 | +PageBuilder Admin icons follow the same design principles as the core [Magento Admin icons]. They are simple, flat, and monochromatic to prevent the loss of detail at smaller sizes, while making their shapes easier to comprehend. |
| 6 | + |
| 7 | +## Page Builder icons |
| 8 | + |
| 9 | +Here are the available PageBuilder Admin font icons (with class names) for use within your content type as needed: |
| 10 | + |
| 11 | +{:width="870px" height="auto"} |
| 12 | + |
| 13 | +Page Builder references these icons by their class names. For example, Page Builder's Heading content type references `icon-pagebuilder-heading` for its panel icon configuration file, as shown here: |
| 14 | + |
| 15 | +```xml |
| 16 | +<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd"> |
| 17 | + <type name="heading" |
| 18 | + label="Heading" |
| 19 | + icon="icon-pagebuilder-heading" |
| 20 | + ...> |
| 21 | +``` |
| 22 | + |
| 23 | +Page Builder's Heading also references three more icons in its toolbar as defined in `Magento/PageBuilder/view/adminhtml/web/js/content-type/heading/preview.js`, shown here: |
| 24 | + |
| 25 | +```js |
| 26 | +{ |
| 27 | + key: "text_align", |
| 28 | + type: "select", |
| 29 | + values: [{ |
| 30 | + value: "left", |
| 31 | + label: "Left", |
| 32 | + icon: "icon-pagebuilder-align-left" |
| 33 | + }, { |
| 34 | + value: "center", |
| 35 | + label: "Center", |
| 36 | + icon: "icon-pagebuilder-align-center" |
| 37 | + }, { |
| 38 | + value: "right", |
| 39 | + label: "Right", |
| 40 | + icon: "icon-pagebuilder-align-right" |
| 41 | + }] |
| 42 | +}]; |
| 43 | +``` |
| 44 | + |
| 45 | +The icons render in the Heading's toolbar, as shown here: |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +You can use these icon class names in your own content types or create your own icons using SVG files (recommended) or PNGs, as described next. |
| 50 | + |
| 51 | +## Creating SVG or PNG icons |
| 52 | + |
| 53 | +To add your own icons, we recommend creating SVG images because they are smaller and render more clearly on high-resolution screens, including mobile devices. |
| 54 | + |
| 55 | +The size, appearance, and color of your images depend on where within Page Builder you want to use them. You can add icons to Page Builder in three areas: |
| 56 | + |
| 57 | +- Panel |
| 58 | +- Form |
| 59 | +- Stage |
| 60 | + |
| 61 | +### Panel icons |
| 62 | + |
| 63 | +To create a panel icon that integrates seamlessly with the existing panel icons, use the following specifications: |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | +The *artboard* represents the actual width and height of your icon when it is exported from your graphics application (16 x 16px). The *artwork* represents the content of your icon. Following these dimensions to ensure your icons match the size and positioning of the existing Page Builder font icons within the panel. |
| 68 | + |
| 69 | +### Form icons |
| 70 | + |
| 71 | +Most of the images used in the Page Builder base forms are one of three sizes: 20 x 20px, 148 x 60px, and 194 x 98px. |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +Your images should match Page Builder's images in both size and appearance. This ensures a professional, integrated look alongside Page Builder's existing icons. We recommend creating three artboards to match these three sizes. Then give your artwork 1-2 pixels of white space from the artboard's edge, as described for panel icons. |
| 76 | + |
| 77 | +### Stage icons |
| 78 | + |
| 79 | +Stage images can be a variety of sizes. For example, Page Builder's `cms-empty-row.svg` image (shown for an empty row, no doubt) is 468 x 103px with a color of #AAA6A0, as shown here: |
| 80 | + |
| 81 | + |
| 82 | + |
| 83 | +Again, take note of its simple design and subtle color. |
| 84 | + |
| 85 | +## Adding your images |
| 86 | + |
| 87 | +Add all your SVG and/or PNG icons to the `adminhtml/web/css/images` directory for your content type. For example, if your content type is called `example-quote`, you would put your icons in `adminhtml/web/css/images/content-type/example-quote/appearance/`, as follows: |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | +## Create CSS classes |
| 92 | + |
| 93 | +As discussed earlier in this topic, Page Builder references its icon fonts using class names from a variety of locations, such as the panel, the toolbar, and the visual selectors within forms. To participate in this icon system, you need to create a CSS class for each SVG and/or PNG image you want to reference by class name. |
| 94 | + |
| 95 | +Add the CSS classes for your icons to your LESS file in `adminhtml` (and to the `frontend` LESS file if relevant), as shown here: |
9 | 96 |
|
10 | | -## Icon library |
| 97 | + |
11 | 98 |
|
12 | | -The following image shows all available PageBuilder Admin icons: |
| 99 | +The following CSS rule set shows one general way to link your icons through CSS: |
13 | 100 |
|
14 | | - |
| 101 | +```css |
| 102 | +.icon-pagebuilder-quote { |
| 103 | + background-image: url('@{baseDir}Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg'); |
| 104 | + width: 16px; |
| 105 | + height: 16px; |
| 106 | +} |
| 107 | +``` |
15 | 108 |
|
16 | | -You can use these icons when extending or customizing the PageBuilder module or [create your own icons]. |
| 109 | +If you are creating an icon for the panel, replace the `background-image` attribute with `content` (as described in the content type tutorial, [Step 6: Add an icon](../create-basic-content-type/step-6-add-icon.md)). |
17 | 110 |
|
18 | | -## Icon fonts |
| 111 | +| Attribute | Description | |
| 112 | +| ---------------------- | ------------------------------------------------------------ | |
| 113 | +| `class name` | To match the class names of Page Builder's native icons, we recommend prefixing your icon names with `icon-pagebuilder`, as we have done with the Quote panel icon. | |
| 114 | +| `background-image url` | The `url` used for the `background-image` is the most critical part of your own CSS classes. Always use the `@{baseDir}` variable followed by your full module name, followed by the path to your image, starting with `css`. When deployed, Page Builder creates a link in the static output where the browser can resolve it, as described below. | |
| 115 | +| `width` | Sets the width of the icon image. | |
| 116 | +| `height` | Sets the height of the icon image. | |
19 | 117 |
|
20 | | -We recommend using icon fonts to get the best quality for your icons. |
21 | | -The PageBuilder Admin icon fonts can be found in the [cms-icons repository]. |
| 118 | +When deployed, your CSS classes and links to your icons are generated in `pub/static`, as shown here: |
22 | 119 |
|
23 | | -If you want to add your own icons, each icon will need to be in its own SVG files. There are multiple ways to create icon fonts, here is one to get started: |
| 120 | + |
24 | 121 |
|
25 | | -1. Go to <a href="https://icomoon.io/app/" target="\_blank"> https://icomoon.io/app/ </a> or download this app in Chrome web store. |
| 122 | +For more general information about Magento's Admin icons and how to create your own icons for use in Magento, take a look at these topics: |
26 | 123 |
|
27 | | -2. Upload your icons in SVG format into the app. |
| 124 | +* [Magento Admin icons] |
| 125 | +* [Create your own icons] |
| 126 | +* [The CMS icons repository] |
28 | 127 |
|
29 | | -3. Specify desired font names and specify the Unicode characters to map the icons. Setting the icons to Private User Area will disable screen-readers or other accessibility tools to read your icon's characters (read "Unicode" section here). |
30 | 128 |
|
31 | | -4. Then initialize a download in the app to generate the icon font and CSS style sheet. |
32 | 129 |
|
33 | 130 | [Magento Admin icons]: https://devdocs.magento.com/guides/v2.2/pattern-library/graphics/iconography/iconography.html |
34 | | -[create your own icons]: https://devdocs.magento.com/guides/v2.2/pattern-library/graphics/iconography/iconography.html#creating-icons |
35 | | -[cms-icons repository]: https://github.com/magento-ux/cms-icons |
| 131 | +[Create your own icons]: https://devdocs.magento.com/guides/v2.2/pattern-library/graphics/iconography/iconography.html#creating-icons |
| 132 | +[The CMS icons repository]: https://github.com/magento-ux/cms-icons |
36 | 133 |
|
37 | | -<!-- {% endraw %} --> |
|
0 commit comments