css动态更新图标 |html css js自适应

首先，大家需要选择一个图标库来作为大家动态更新的图标源。目前很流行的框架包括Font Awesome、Iconfont和Ionicons，这里以Font Awesome为例。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

接下来大家需要编写一些css代码来实现动态更新。首先大家需要定义一个元素，例如一个按钮，然后给它添加一个class属性以便大家可以通过css来更新它的样式。

<button class="icon-btn"><i class="fa fa-music"></i> Listen</button>

这个button元素中包含了一个i元素，在Font Awesome中，每个图标都被定义为一个类似“fa-music”的名称。大家可以通过添加或删除这个类来动态更新图标。为了实现这个功能，大家需要通过css伪类:after来添加新的样式，然后通过javascript来控制切换。

.icon-btn:after {
content: "\f001";
font-family: "FontAwesome";
position: absolute;
}
.icon-btn.active:after {
content: "\f144";
}

在这个代码中，大家使用了:before伪元素来插入一个在button元素之前的i元素，然后设置content属性为要插入的图标unicode值，在Font Awesome中，每个图标都被分配了一个独特的unicode值。大家还使用了font-family属性来指定使用Font Awesome字体，position属性来设置在button元素上面。

最后，大家使用javascript来切换active类：

var iconBtn = document.querySelector(".icon-btn");
iconBtn.addEventListener("click", function() {
iconBtn.classList.toggle("active");
});

这段代码中，大家选择了button元素并为它添加了一个事件监听器，当点击时切换active类。

利用上面这些步骤，你就可以实现动态更新图标了。当然，除了上面使用的方法以外，还有很多其他的方法可以实现此功能。掌握不同的方法可以让你在设计网页时更加灵活和自由。