html - CSS，如何在链接后面制作一个图标并且链接仍然可以点击

Question

我可以在链接后面制作图标，但无法再使其可点击。

我已经使用了 z-index 属性。但我没有运气。

有人可以帮助我，找到一种方法在链接后面添加一个图标并且链接仍然可以点击吗？

PS:我只能点击 Angular 落里的链接。

这是问题的片段:

.menu-expanded{	
    background-color: #F16136;
    background-image: linear-gradient(transparent 4%, rgba(255, 255, 255, 0.9) 1%);
    background-size: 50px 30px;
    max-height: 250px;
    min-height: 250px;
  	opacity: 1;
    
}
.menu-itens{
    position:absolute;
    padding-left:70px;
}

i{
  position: absolute;
  opacity: 0.35;
}
ul{
    list-style-type:none;
    padding: 0px;
    margin: 0px;
}
ul  li{
  text-align: center;
  display: block;
 
}
ul  li a{
  text-align: center;
  display: block;
  font-size: 1.0em;
  color: #55D;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.8em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  line-height: 2.5em;
}

a:hover{
  color:#00405d;
  text-decoration:underline;
}

.rightpercent10{
   right:10%;
}
.rightpercent20{
   right:20%;
}
.rightpercent40{
   right:40%;
}
.rightpercent50{
   right:50%;
}
.leftpercent10{
   left:10%;
}
.leftpercent20{
   left:20%;
}
.leftpercent40{
   left:40%;
}
.leftpercent13{
   left:13%;
}
.padtpercent6{
    padding-top:6%;
}
.padtpercent11{
    padding-top:11%;
}
.padtpercent5{
    padding-top:5%;
}
.padtpercent2{
    padding-top:2%;
}
.padtpercent12{
    padding-top:12%;
}
.padtpercent13{
    padding-top:13%;
}
.padtpercent10{
    padding-top:10%;
}
.padtpercent20{
    padding-top:20%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div ng-init="bindMenuEvent()" ng-show="menu.show" id="menu-expanded" class="menu-expanded" style="">
		<!-- start header menu -->
		<div ng-show="menu.name==='camisas'" class="menu-itens camisas" style="">
			<!-- ngRepeat: (key, value) in loja.gender --><div class="item ng-scope" ng-repeat="(key, value) in loja.gender">
				<div class="header_nav">
					<h4 ng-bind="key" class="ng-binding">masculine</h4>
					<ul>
						<li><a ng-click="clickLinkMenu()" ng-href="/#!/products/gender/masculino" href="/#!/products/gender/masculino">All  models</a></li>
						<!-- ngRepeat: typeClothes in value --><li ng-repeat="typeClothes in value" class="ng-scope">
							<a ng-click="clickLinkMenu()" ng-href="/#!/Regata/masculino" ng-bind="typeClothes" class="ng-binding" href="/#!/Regata/masculino">Regata</a>
						</li><!-- end ngRepeat: typeClothes in value --><li ng-repeat="typeClothes in value" class="ng-scope">
							<a ng-click="clickLinkMenu()" ng-href="/#!/Camiseta/masculino" ng-bind="typeClothes" class="ng-binding" href="/#!/Camiseta/masculino">Camiseta</a>
						</li><!-- end ngRepeat: typeClothes in value -->

					</ul>	
				</div>							
			</div><!-- end ngRepeat: (key, value) in loja.gender -->
			<!-- ngRepeat: (key, value) in loja.collection -->
		</div>
		<i class="fa fa-music fa-4x rightpercent10 padtpercent6"></i>
		<i class="fa fa-music fa-3x rightpercent20 padtpercent11"></i>
		<i class="fa fa-music fa-4x rightpercent40 padtpercent5"></i>
		<i class="fa fa-music fa-5x rightpercent50 padtpercent2"></i>
		<i class="fa fa-music fa-5x leftpercent13 padtpercent20"></i>
		<i class="fa fa-music fa-2x leftpercent20 padtpercent13"></i>
		<i class="fa fa-music fa-4x leftpercent13 padtpercent10"></i>
		 
</div>

Answer 1

将 pointer-events: none 应用于图标。