Skip to content

Commit cb0bc37

Browse files
committed
MAGEDOC-3424: Update Iconography topic
Updated from PR review
1 parent a37f42b commit cb0bc37

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

docs/configurations/iconography.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Page Builder references these icons by their class names. For example, Page Buil
2020
...>
2121
```
2222

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:
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:
2424

2525
```js
2626
{
@@ -90,9 +90,9 @@ Add all your SVG and/or PNG icons to the `adminhtml/web/css/images` directory fo
9090

9191
## Create CSS classes
9292

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. 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.
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.
9494

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:
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:
9696

9797
![Create config file](../images/step6-icon-style.png)
9898

@@ -111,11 +111,11 @@ If you are creating an icon for the panel, replace the `background-image` attrib
111111
| Attribute | Description |
112112
| ---------------------- | ------------------------------------------------------------ |
113113
| `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. |
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. |
115115
| `width` | Sets the width of the icon image. |
116116
| `height` | Sets the height of the icon image. |
117117

118-
When deployed, your CSS classes and links to your icons are generated in `pub/static` as shown here:
118+
When deployed, your CSS classes and links to your icons are generated in `pub/static`, as shown here:
119119

120120
![Create config file](../images/step6-icon-link-static.png)
121121

0 commit comments

Comments
 (0)