CODEWITHSUNDEEP
css
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

CSS icon difficult to click

I have come up with my own plus icon since font-awesome analogue seemed to thick for me. But I have one issue: It is very difficult to click on the icon. The user has to put the cursor exactly on the minus sign in order to click the icon or see the tooltip.

.plus {
  position: relative;
  width: 15px;
  height: 15px;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}
<i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms">
			</i>

Upvotes: 1

Views: 135

Answers (2)

user7582130
user7582130

Reputation:

In this code, I have changed your .plus to have a display: block; a background: blue; and a padding: 3px; to show you how it is working.

When changing the position of the icon itself, you may need to edit your .plus:before class to align with the padding.

I hope this helped ! http://jsfiddle.net/6rekek66/1/

.plus {
  width: 15px;
  height: 15px;
  position: relative;
  display: block;
  background: blue;
  padding: 3px;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 9px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}
<i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms">
			</i>

Upvotes: 2

mayersdesign
mayersdesign

Reputation: 5310

Basically adding display: block will solve this. Here I have also added a temporary pink background to make the clickable zone clearer, and tweaked a couple more values.

.plus {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  background: pink;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 7px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}
<a href="#"><i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms">
</i></a>

Upvotes: 0

Related Questions