blocks|key|2498804|text|首先，您需要包含Google+web字体|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2498805|<link+href="https://fonts.googleapis.com/icon?family=Material%2BIcons"
++++++rel="stylesheet">|code-block|syntax|javascript|2498806|在需要替换的切换按钮的css定义中|2498807|font-family:+'Glyphicons+Halflings';|2498808|通过|2498809|font-family:+'Material+Icons';|2498810|最后，|2498811|content:+"\e114";+|2498812|通过以下任一方式|2498813|content:+"expand_less";+|2498814|或|2498815|content:+"expand_more";|2498816|下面是一个基于您的代码的示例：|2498817|​|2498818|.panel-heading+.accordion-toggle:after+{
++font-family:+'Material+Icons';
++content:+"expand_less";
++float:+right;
++color:+grey;
}

.panel-heading+.accordion-toggle.collapsed:after+{
++font-family:+'Material+Icons';
++content:+"expand_more";
}|2498819|
<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link+href="https://fonts.googleapis.com/icon?family=Material%2BIcons"+rel="stylesheet">
<div+class="container">


++<div+class="panel-group"+id="accordion">
++++<div+class="panel+panel-default">
++++++<div+class="panel-heading">
++++++++<h4+class="panel-title">
++++++++++<a+class="accordion-toggle"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseOne">
++++++++++Collapsible+Group+Item+#1
++++++++</a>
++++++++</h4>
++++++</div>
++++++<div+id="collapseOne"+class="panel-collapse+collapse+in">
++++++++<div+class="panel-body">
++++++++++Anim+pariatur+cliche+reprehenderit,+enim+eiusmod+high+life+accusamus+terry+richardson+ad+squid.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird
++++++++++on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,
++++++++++raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++++</div>
++++++</div>
++++</div>
++++<div+class="panel+panel-default">
++++++<div+class="panel-heading">
++++++++<h4+class="panel-title">
++++++++++<a+class="accordion-toggle+collapsed"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseTwo">
++++++++++Collapsible+Group+Item+#2
++++++++</a>
++++++++</h4>
++++++</div>
++++++<div+id="collapseTwo"+class="panel-collapse+collapse">
++++++++<div+class="panel-body">
++++++++++Anim+pariatur+cliche+reprehenderit,+enim+eiusmod+high+life+accusamus+terry+richardson+ad+squid.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird
++++++++++on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,
++++++++++raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++++</div>
++++++</div>
++++</div>
++++<div+class="panel+panel-default">
++++++<div+class="panel-heading">
++++++++<h4+class="panel-title">
++++++++++<a+class="accordion-toggle+collapsed"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseThree">
++++++++++Collapsible+Group+Item+#3
++++++++</a>
++++++++</h4>
++++++</div>
++++++<div+id="collapseThree"+class="panel-collapse+collapse">
++++++++<div+class="panel-body">
++++++++++Anim+pariatur+cliche+reprehenderit,+enim+eiusmod+high+life+accusamus+terry+richardson+ad+squid.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird
++++++++++on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,
++++++++++raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++++</div>
++++++</div>
++++</div>
++</div>


</div>



<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>|2498820|2498821|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1D|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1N|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1O|8|@]|9|@]|A|$]]|$1|14|3|15|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|16|3|17|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|18|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|1A|$]]

<p>First you need to include the Google web font</p>

<pre><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"&gt;
</code></pre>

<p>Inside the css definition for the toggle buttons you need to replace</p>

<pre><code>font-family: 'Glyphicons Halflings';
</code></pre>

<p>by</p>

<pre><code>font-family: 'Material Icons';
</code></pre>

<p>and lastly</p>

<pre><code>content: "\e114"; 
</code></pre>

<p>by either</p>

<pre><code>content: "expand_less"; 
</code></pre>

<p>or</p>

<pre><code>content: "expand_more";
</code></pre>

<p>Here's an example based on your code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-heading .accordion-toggle:after {
  font-family: 'Material Icons';
  content: "expand_less";
  float: right;
  color: grey;
}

.panel-heading .accordion-toggle.collapsed:after {
  font-family: 'Material Icons';
  content: "expand_more";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
&lt;div class="container"&gt;


  &lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
          Collapsible Group Item #1
        &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
          Collapsible Group Item #2
        &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
          Collapsible Group Item #3
        &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;


&lt;/div&gt;
&lt;!-- end container --&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I want to replace a FontAwesome Icon with Google Materials SVG Icon, after a collapsible table button toggle is pressed (goes from down arrow to up arrow). Current Code is this. I cannot get Google Material Icons code working. How would i fix this?</p>

<p>Should work like this, except with Google icons:</p>

<p><a href="https://codepen.io/tofanelli/pen/waadRY" rel="nofollow noreferrer">https://codepen.io/tofanelli/pen/waadRY</a></p>

<p><strong>Font Awesome</strong></p>

<pre><code>.card-header .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right; 
    color: grey; 
}


.card-header .accordion-toggle.collapsed:after {
    content: "\e113";
}
</code></pre>

<p><strong>Google Material Icons:</strong></p>

<pre><code>.card-header .accordion-toggle:after .material-icons{
    content: "\e5cf"; 
    float: right; 
    color: grey; 
}


etc
</code></pre>

<p>Picture example from toggling button:</p>

<p><a href="https://i.stack.imgur.com/SQlUO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQlUO.png" alt="enter image description here"></a></p>


HTML CSS: Use Collapsible Toggle with SVG Icon

我想用谷歌材料SVG图标替换一个FontAwesome图标，在一个可折叠的表格按钮切换被按下(从下箭头到上箭头)。当前代码是这样的。我不能让谷歌材料图标的代码工作。我该怎么解决这个问题？应该是这样工作的，除了Google图标：字体强大的.card-header .accordion-toggle:after {    ...

问HTML CSS:对SVG图标使用可折叠切换
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS:对SVG图标使用可折叠切换EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS:对SVG图标使用可折叠切换
EN