Ali Zia Ali Zia - 1 month ago 10
CSS Question

How can I create an icon and text in same div like table format

I am using Framework 7. I need to create a div with this format.

enter image description here

I have the icon of height 80px x 80px and I can use it like this.

<i class="icon icon-clock-large"></i>


I have absolutely no idea of css. I tried using columns but they create a problem on small screen. How can I achieve this?

Answer

Use Below code

.container {
                padding: 10px;
                width: 200px;
                color: #09cd68;
                background: #262223;
                display: block;
                font-family: verdana;
                height: 50px;
            }

            .left{
                float:left;  
            }

            .clr{
                clear:both;  
            }

            .loadingtext{
                width: 140px;
                margin: 4px 0px 0px 15px;
            }
            .pleasewait{
                font-size:13px;
            }
            .processing{
                text-transform:uppercase;
                font-size:20px;
            }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="left">
    <i class="fa fa-clock-o fa-3x"></i>
  </div>
  <div class="left loadingtext">
    <div class="pleasewait">Please wait<div>
      <div class="processing">PROCESSING</div>
  </div>
  <div class="clr"></div>
</div>

Comments