You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/configurations/iconography.md
+72-18Lines changed: 72 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -2,22 +2,57 @@
2
2
3
3
## Overview
4
4
5
-
PageBuilder Admin icons follow the same design principles as the core [Magento Admin icons].
6
-
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.
7
6
8
7
## Page Builder icons
9
8
10
-
The following image shows all available PageBuilder Admin icons with class names to reference them by:
9
+
Here are the available PageBuilder Admin font icons (with class names) for use within your content type as needed:
You can use these icons when extending or customizing the PageBuilder module or create your own icons using SVG files or icon fonts as described next.
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:
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 are render in the Heading's toolbar as shown here:
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.
15
50
16
51
## Creating SVG or PNG icons
17
52
18
-
To add your own icons, we recommend creating SVG icons because they are smaller and render more clearly on high-resolution screens, including mobile devices.
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.
19
54
20
-
The size of the icons you create depends on where within Page Builder you want to use them. You can add icons to Page Builder in three areas:
55
+
The size, appearance, and color of your images depends on where within Page Builder you want to use them. You can add icons to Page Builder in three areas:
21
56
22
57
- Panel
23
58
- Form
@@ -29,29 +64,39 @@ To create a panel icon that integrates seamlessly with the existing panel icons,
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 ensures your icons will match the size and positioning of the existing Page Builder icons within the panel.
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.
33
68
34
-
### Form and stage icons
69
+
### Form icons
35
70
36
-
The native Page Builder icons found in forms and on the Admin stage are a variety of sizes, from 20 x 20px up to almost 200px in width, as shown here:
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.
The best way to decide how big to create your form or stage icons is to inspect the sizes of the Page Builder's existing icons from the browser dev tools. The idea is to emulate the icon sizes as closely as possible to ensure that your icons integrate well and look professional alongside Page Builder's existing icons.
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
41
78
42
-
## Adding your icons
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:
Again, take note of its simple design and subtle color.
84
+
85
+
## Adding your images
43
86
44
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:
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. Creating your own CSS classes for the SVG and PNG images you plan on referencing by class name is required if you want to participate in Page Builder's system of CSS class references.
49
94
50
-
For each SVG or PNG icon you create, add a CSS class to your LESS file in `adminhtml` as shown here:
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:
Creating a CSS class for each icon provides an easy way to reference and display your icons in a variety of places throughout Page Builder. The following CSS rule set shows one way to link to your icons through CSS:
99
+
The following CSS rule set shows one general way to link your icons through CSS:
55
100
56
101
```css
57
102
.icon-pagebuilder-quote {
@@ -61,19 +106,28 @@ Creating a CSS class for each icon provides an easy way to reference and displa
61
106
}
62
107
```
63
108
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)).
|`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. |
67
-
|`background-image url`| The `url` used for the `background-image` is the most critical part of the CSS. 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. |
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. |
68
115
|`width`| Sets the width of the icon image. |
69
116
|`height`| Sets the height of the icon image. |
70
117
71
-
When deployed, your icon images are linked from`pub/static` as shown here:
118
+
When deployed, your CSS classes and links to your icons are generated in`pub/static` as shown here:
0 commit comments