diff --git a/docs/components.html b/docs/components.html index 4caa9e6f28..0db89d977d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -31,7 +31,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

-

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

+

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

{% highlight html %} @@ -761,7 +761,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,

Don't mix with other components

-

Do not mix form group or grid column classes directly with input groups.

+

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

diff --git a/docs/css.html b/docs/css.html index d8d6b8bb5b..315e8249ae 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1580,6 +1580,10 @@ For example, <section> should be wrapped as inline. {% endhighlight %} +
+

Don't mix form groups with input groups

+

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

+

Inline form