CODEWITHSUNDEEP
javascriptphpjqueryhtmljsp
Aldam
Aldam

Reputation: 11

CSS Warning Div with icon

I created a warning message or div generally that shows when we checkout for domain purchase.

But when I create my own CSS

The lock icon does must show to the left of the text but shows inline.

Upvotes: 1

Views: 3556

Answers (2)

vaishali kapadia
vaishali kapadia

Reputation: 934

Add float:left; to <i>

And Mention approx height to occupy space for <i>. I have given height: 100px; here.

.ftralert{
width:50%;
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}

.ftralert-warning i {
float:left;
margin-right:30px;
height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ftralert ftralert-warning">
<i class="glyphicon glyphicon-lock" style="font-size:24px;"></i>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>

Hope this helps :)

Upvotes: 1

Rence
Rence

Reputation: 2950

You added your icon inline. Make it a separate div, as well as the text, and set the divs to inline block with a set width that adds up to 100% (for example, 20% & 80%, adjust to your needs).

https://www.w3schools.com/css/css_inline-block.asp

https://jsfiddle.net/kh2yn0xa/6/

.ftralert{
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
/*remove inline gap*/
font-size: 0;
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}

.ftralert > div {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
/* adjust for your icon */

.ftralert > div:first-child {
  width: 20%;
}

.ftralert > div:last-child {
  width: 80%;
}
<div class="ftralert ftralert-warning">
  <div>
    <i class="glyphicon glyphicon-lock" style="font-size:24px;">Icon</i>
  </div>
  <div>
    This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
  </div>
</div>

Upvotes: 0

Related Questions