Question

我需要检查ionicon中X的颜色，但不能更改x本身。我可以更改圆的背景颜色或实际颜色。

有没有办法只改变x？

ResponsiveTable

 onAfterRendering : function(){
        var tTable = this.byId("LineItemsSmartTable");
        var oTable = this.byId("LineItemsSmartTable").getTable(); 
        oTable.setMode(sap.m.ListMode.SingleSelectMaster);
        oTable.onAfterRendering = function(){
          this.attachItemPress(function(oEvent){ alert( "Pressed" ); });
        };
            
        //	var fnItemPress = function(){ alert("press2") };   
        tTable.attachDataReceived(function(){
             var aItems = oTable.getItems();
             if(aItems.length === 0 ) return;
             $.each(aItems, function(oIndex, oItem) {
                //oItem.detachPress(fnItemPress);
                 oItem.setType("Active");
          //	oItem.attachPress(fnItemPress);
            });
			 });
}

所以最终我需要实现这一目标

Answer 1

您可以使用带有背景颜色和绝对位置的边框半径来使图标居中：

body {
  background-color: lightgreen;
}

.ion-ios-close-circle {
  font-size: 50px;
  border-radius: 50%;
  overflow: hidden;
  width: 35px;
  height: 35px;
  display:inline-block;
  position: relative;
}

.ion-ios-close-circle:before {
  display:inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.a {
  background-color: white;
}

.b {
  background-color: orange;
}

/* ie11 only move icon down 1px */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
_:-ms-fullscreen, :root .ion-ios-close-circle:before {
      margin-top:1px;
   }
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
</head>

<body>
  <div>
    <i class="a ion-ios-close-circle"></i>
    <i class="b ion-ios-close-circle"></i>
  </div>
</body>

</html>

Answer 2

好像离子子的SVG没有舍入，您可以尝试使用FontAwesome

body {
  background-color: lightgreen;
}
.fas.fa-times-circle.c {
  background-color: white;
  color: blue;
  font-size:50px;
  border-radius:50%;
 border: none;
  
}

<!DOCTYPE html>
<html>
  <head>
    
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  </head>

  <body>
    <div>
    
      <i class="c fas fa-times-circle"></i>
    </div>
  </body>
</html>

改变离子键含量的颜色

2 个答案: