Font Awesome stacked icons disappears as screen shrinks

Question

I am working on a form where I want the user to click on a color scheme. I am using bootstrap and I am using circle font awesome icons to do this. When it is clicked, a new font-awesome icon that is stacked appears. I have noticed that when the page shrinks to a certain point, the one icon that is "clicked" disappears.

I know that it is caused because of the icon being stacked, but I don't understand the root cause of this. What can I do to fix this?

Here is a screenshot of the screen at normal resolution:

Here it is when I shrink the page:

Here is the code:

<div class="row pb-4">
  <div class="col-md-2 offset-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if=" this.headClass !== 'bc-header-red' "></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #D1504F;" v-if=" this.headClass === 'bc-header-red' "></i>
    <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-red' "></i>
  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass !== 'bc-header-blue' "></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass === 'bc-header-blue' "></i>
    <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-blue' "></i>

  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass !== 'bc-header-green' "></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass === 'bc-header-green' "></i>
    <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-green' "></i>

  </div>
  <div class="col-md-2 text-center">
    <i class="fas fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass !== 'bc-header-yellow' "></i>
    <i class="fas fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass === 'bc-header-yellow' "></i>
    <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-yellow' "></i>

  </div>
</div>

Please try to create a demo of the code. I guess it includes some JavaScript functions as well. — m4n0

Akber Iqbal Akber Iqbal · Accepted Answer · 2019-07-26T04:41:10

Can't replicate your scenario based on the information that you've given... however if you suspect that vertical stack has something to do with it, why not keep it horizontal... like in the code below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="row pb-4 justify-content">
  <div class="col-md-2 col-2 offset-md-2 offset-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if=" this.headClass !== 'bc-header-red' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #D1504F;" v-if=" this.headClass === 'bc-header-red' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-red' "></i>
  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass !== 'bc-header-blue' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass === 'bc-header-blue' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-blue' "></i>

  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass !== 'bc-header-green' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass === 'bc-header-green' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-green' "></i>

  </div>
  <div class="col-md-2 col-2 text-center">
    <i class="fa fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass !== 'bc-header-yellow' "></i>
    <i class="fa fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass === 'bc-header-yellow' "></i>
    <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-yellow' "></i>

  </div>
</div>

Font Awesome stacked icons disappears as screen shrinks

1 Answers