I'm facing an issue where the text in my message boxes wraps around the bottom of a smaller icon when I use a left floated span with MDI Icons via class ::before selection.
Interestingly, using a larger (50px) icon doesn't cause this problem (although I have no idea why). Here's a screen recording to show the behavior: https://i.sstatic.net/sokJH.gif
The desired outcome is to keep the text aligned on the right side of the icon without wrapping underneath it. I hope that clarifies things.
I suspect that switching from left floating the icon might solve the issue, but I'm unsure how to achieve what I need without using float. Below is the HTML code:
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UI Playground</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/admonitions.css">
<link rel="stylesheet" href="css/icons.css">
</head>
<body>
<div class="admonition info">
<span class="admonition-icon icon-35 mdi-information-outline"></span>
<span class="admonition-title">This is an informational message with an Icon</span>
<span class="admonition-text">
Ut mollis ligula vulputate lectus eleifend, et commodo nibh faucibus.
</span>
</div>
<div class="admonition-alt">
<span class="admonition-icon icon-55 mdi-ubuntu"></span>
<span class="admonition-title">This is the title</span>
<span class="admonition-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper turpis ex, eget fringilla ligula gravida nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vulputate lacus sed massa aliquet suscipit. Suspendisse potenti. Maecenas iaculis dolor non mollis ornare.
</span>
</div>
<div class="admonition-alt">
<span class="admonition-icon icon-35 mdi-ubuntu"></span>
<span class="admonition-title">This is the title</span>
<span class="admonition-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>
</body>
</html>
And here is the CSS code:
:root {
--ui-font-stack-sans: "Helvetica Now Text", "Helvetica LT Pro", "Helvetica", "SF Pro Text", "Arial", sans-serif;
}
body {
font-size: 15px;
color: #555555;
line-height: 1.5em;
font-family: var(--ui-font-stack-sans);
}
/* Global Admonition Defaults */
div.admonition,
div.admonition-alt {
border-radius: 5px;
overflow: visible;
page-break-inside: avoid;
display: flow-root;
padding: 1em 0 1em 0em;
margin-bottom: 1.5em;
font-family: var(--ui-font-stack-sans);
}
div.admonition>.admonition-title,
div.admonition-alt>.admonition-title {
display: flow-root;
font-size: 1.1rem;
color: #535464;
padding-left: .96em;
font-weight: 400;
}
div.admonition>.admonition-text,
div.admonition-alt>.admonition-title {
color: rgb(118 116 116);
font-size: .94em;
font-weight: 400;
display: flow-root;
line-height: 1.5em;
padding-left: 1.2em;
margin-top: 2px;
}
/* Blue Info Admonition Colors */
/* Gray Admonition Defaults */
... //CSS continued
.admonition-icon {
float: left;
}
.icon-35 {
font: normal normal normal 35px/1 "Material Design Icons";
display: inline-block;
text-rendering: auto;
position: relative;
top: 8px;
margin-left: 14px;
}
.icon-55 {
font: normal normal normal 55px/1 "Material Design Icons";
display: inline-block;
text-rendering: auto;
position: relative;
top: 3px;
margin-left: 16px;
}
If anyone has any suggestions, advice, or solutions to offer, I would greatly appreciate it!