CSS - Add icon on left of border with relative position - css

Question

I have the following Code Pen:
https://codepen.io/anon/pen/RBdWOa
What I need is to show an icon 16x16 on top of the border in the very left position as the following image (red circles should be the icon).
I have a LeftIcon class for the following HTML element.
<i class="fa fa-search LeftIcon"></i>
.LeftIcon {
position: relative;
bottom: 0;
right: 0px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
But if you see is not aligned where I need it.
Any clue?

Answer 1

If you want to place an element on top of another one, set position relative on the parent element and position absolute on the child element. Then use top and left to position the item as you wish. In your case you are displaying elements relative to each other.
Here's how you can achieve what you are asking.
Set 'position: relative' on .DialogBox__message-content.
Then place the icon in the above div.
Set the following style on the .LeftIcon class.
position: absolute; //places the icon in absolute position to message-content*
top: calc(50% - 10px); // sets the top at 50% - half of the height (19px)*
left: -12px; // places the element on top of the line*
html body {
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
font-size: 14px;
font-weight: 400;
font-style: normal;
}
div {
display: block;
}
.DialogBox {
text-align: right;
}
.DialogBox__message {
margin-bottom: 20px;
-webkit-transition: .35s ease;
transition: .35s ease;
text-align: right;
}
.DialogBox__messages-wrapper {
padding: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
background-color: #f2f2f2;
border-style: solid;
}
.DialogBox__message-content {
background-color: #ffffff;
color: #525860;
padding: 15px 35px;
max-width: 400px;
display: inline-block;
margin-bottom: -20px;
margin-right: 20px;
margin-left: 0;
border-radius: 20px;
text-align: left;
word-wrap: break-word;
border-style: dashed;
position: relative;
}
.LeftIcon {
position: absolute;
top: calc(50% - 10px);
left: -12px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a first message.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a second message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a third message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a final message bye bye.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>

Answer 2

Roy Covered the answer pitty well. While I was working on this Codepen. The only difference is I used transform:translate() to to align the icon horizontally. In addition to this, you can use text-align: center;and line-height: 17px; to center the Font Awesome icon in the center.
https://codepen.io/Henk-io/pen/VBReaa?editors=1100
.LeftIcon {
position: absolute; /*Needs to be Absolute Positioned to the parent relative div*/
top: 50%; /*50% from the top*/
left: -10px; /*-10px left as the width is 20px*/
transform: translate(0, -50%); /*Moves postion of element*/
text-align: center; /*Aligns icon in center vertically*/
line-height: 17px; /*Aligns icon in center horizontally*/
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}

Answer 3

I would use flex-box for such thing.
Here is an simplified version of yours example:
.dialog-box {
display: flex;
flex-direction: row;
align-items: center;
min-width: 100%;
height: 32px;
background: #cccccc;
}
.dialog-box__search {
min-width: 10%;
display: block;
color: #ff0000;
text-align: center;
}
.dialog-box__content {
text-align:center;
width: 100%;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="dialog-box">
<div class="dialog-box__search">
<i class="fa fa-search"></i>
</div>
<div class="dialog-box__content">
First content
</div>
</div>
</body>
</html>