使用链接使整个div可点击(making entire div clickable with a link)

 在我提出这个问题之前，我先说一下。我确实尝试了很长时间通过现有主题，但我找不到解决问题的方法。 
 
 我正在使用Bootstrap并且有一个水平的项目列表，其中包含图标和下面的文本链接。 我想要的基本上是整个div可点击作为链接，而不仅仅是实际的文本。 
 
 这是HTML： 
 
<ul class="glyphs character-mapping">
                <li>
                  <div data-icon="a" class="icon"></div>
                  <a href="">Link 1</a>
                </li>
                <li>
                  <div data-icon="b" class="icon"></div>
                  <a href="">Link 2</a>
                </li>
</ul>
 
 而CSS： 
 
.glyphs.character-mapping {

margin: 0px;
padding: 0px;
color: #000000;

}
.glyphs.character-mapping li {

margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;

}
.glyphs.character-mapping .icon {

margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px; 

}
 
 我尝试了几个与此相关的解决方案，包括不给“li”填充或填充，而是将'a'设为100％宽和高，但这也不起作用。 
 
 我在这里做错了什么想法？ 
 
 非常感谢你提前帮忙。 

Let me just say before I ask this question ..I did try searching for a long time through existing topics but I can't find a working solution to my problem.
 
I am using Bootstrap and have a horizontal list of items with icons and a text link underneath. What I want is basically the entire div clickable as the link, not just the actual text.
 
Here is the HTML:
 
<ul class="glyphs character-mapping">
                <li>
                  <div data-icon="a" class="icon"></div>
                  <a href="">Link 1</a>
                </li>
                <li>
                  <div data-icon="b" class="icon"></div>
                  <a href="">Link 2</a>
                </li>
</ul>
 
And the CSS:
 
.glyphs.character-mapping {

margin: 0px;
padding: 0px;
color: #000000;

}
.glyphs.character-mapping li {

margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;

}
.glyphs.character-mapping .icon {

margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px; 

}
 
I tried several solutions that are related on here, including giving no padding or margin to the 'li' and instead making the 'a' 100% wide and high, but that didn't work either.
 
Any ideas what I'm doing wrong here?
 
Thank you so much in advance for any help.

原文：