.icon {
position: absolute;
border: none;
margin: 25px 25px 25px 15px;
}
.icon:before {
content: url(../img/icon/twitter1.png);
width: 100%;
}
<form>
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://">
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://">
</form>
<html>
<head>
<style>
.icon {
position: absolute;
border: none;
margin: 25px 25px 25px 15px;
}
.twitter:before {
content: url(twitter.png);
width: 100%;
}
.instagram:before {
content: url(instagram.png);
width: 100%;
}
</style>
<script>
function refreshIcon(target) {
let iconClass = "twitter"
if (target.value.indexOf("instagram") > -1) {
iconClass = "instagram";
}
target.previousSibling.classList = `submit icon ${iconClass}`;
}
</script>
</head>
<body>
<form>
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://" oninput="refreshIcon(this)">
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://" oninput="refreshIcon(this)">
</form>
</body>
</html>
<html>
<head>
<style>
.icon {
position: absolute;
border: none;
margin: 25px 25px 25px 15px;
}
.icon:before {
content: var(--icon);
width: 100%;
}
</style>
<script>
function refreshIcon(target) {
let iconLink = "twitter.png"
if (target.value.indexOf("instagram") > -1) {
iconLink = "instagram.png";
}
target.previousSibling.style = `--icon: url(${iconLink})`;
}
</script>
</head>
<body>
<form>
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://" oninput="refreshIcon(this)">
<a class="submit icon"></a><input class="user-link" type="text" placeholder="https://" oninput="refreshIcon(this)">
</form>
</body>
</html>