某些SVG作为base64无法使用CSS正确显示，但在img标签内的HTML中可以正常工作

Question

For some reason some of the SVGs I'm using are not displaying correctly when stylized through CSS but works with no problems at all when they're used within an img tag. Here's a demonstration: https://jsfiddle.net/xf29ze1m/

HTML (#1 and #3 does not work):

<span class="testing"><i class="icon-test">#1</i></span>
<span class="testing"><i class="icon-test2">this one works for some reason</i></span>
<span class="testing"><i class="icon-test3">#2</i></span>

HTML (#1 and #3 works fine within an img tag):

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+" />

CSS:

[class^="icon-"],
[class*="icon-"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

img {
    height:56px;
    width:56px;
}
.icon-test {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

.icon-test2 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwOCA1MDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOCA1MDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRDg0Njk7IiBkPSJNNTA4LDI1NGMwLDE0MC40LTExMy42LDI1NC0yNTQsMjU0UzAsMzk0LjQsMCwyNTRTMTEzLjYsMCwyNTQsMGMxMTAuOCwwLDIwNC44LDcwLjgsMjM5LjYsMTY5LjYNCgljNy42LDIxLjIsMTIsNDMuNiwxMy42LDY2LjhDNTA4LDI0Mi40LDUwOCwyNDgsNTA4LDI1NHoiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAxNjUuNiwzMTguNCA3NCwzMDMuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBQ0IzQkE7IiBwb2ludHM9IjE2NS42LDMxOC40IDE5Ny4yLDM4Mi40IDIwNS42LDMzMC40IDM4MCwxMjUuNiAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNDRUQ1RTA7IiBwb2ludHM9IjE5Ny4yLDM4Mi40IDM4MCwxMjUuNiAyMDUuNiwzMzAuNCAiLz4NCjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFNkU5RUU7IiBwb2ludHM9IjM4MCwxMjUuNiAzMzYuNCwzNjAuOCAyMDUuNiwzMzAuNCAiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg==);
}

.icon-test3 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc+DQogICAgICA8cGF0aCBkPSJNNjQuNSwxMjIuM2MzMiwwLDU3LjktMjYsNTcuOS01Ny45YzAtMzItMjYtNTcuOS01Ny45LTU3LjlTNi42LDMyLjQsNi42LDY0LjRDNi42LDk2LjMsMzIuNSwxMjIuMyw2NC41LDEyMi4zeiAgICAgTTY0LjUsMTQuNmMyNy41LDAsNDkuOCwyMi4zLDQ5LjgsNDkuOGMwLDI3LjUtMjIuMyw0OS44LTQ5LjgsNDkuOFMxNC43LDkxLjgsMTQuNyw2NC40QzE0LjcsMzYuOSwzNywxNC42LDY0LjUsMTQuNnoiIGZpbGw9IiM3Nzc2NzYiLz4NCiAgICAgIDxwYXRoIGQ9Im02MS44LDcxLjJoMTkuM2MyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjMtMS44LTQuMS00LjEtNC4xaC0xNS4ydi0yMy44YzAtMi4zLTEuOC00LjEtNC4xLTQuMXMtNC4xLDEuOC00LjEsNC4xdjI3LjljMCwyLjMgMS44LDQuMSA0LjEsNC4xeiIgZmlsbD0iIzc3NzY3NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+);
}

I tried using: background-position: 0 0; instead of background-position: center center; to no avail. I also tried changing the fill color within the SVG file, still didn't work. Any pointers?

Answer 1

I've included the value cover for the background-size and removed the background-position .

 [class^="icon-"], [class*="icon-"] { display: inline-block; width: 16px; height: 16px; background-size: cover; background-repeat: no-repeat; } img { height:56px; width:56px; } .icon-test { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo='); } .icon-test2 { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg=='); } .icon-test3 { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc++'); } 

 <span class="icon-test"></span> <span class="icon-test2"></span> <span class="icon-test3"></span> <br> <br> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTcgMjk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPGc+CgkJCQk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNFM0U1RTQ7IiBjeD0iMTQ4LjUiIGN5PSIxNDguNSIgcj0iMTQ4LjUiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MjlEQTU7IiBkPSJNMjE3Ljg5MywxMjAuNDZMNDkuNSwxOThsOTksOTljNjYuNTQsMCwxMjIuODU1LTQzLjc2NSwxNDEuNzM5LTEwNC4wNzlMMjE3Ljg5MywxMjAuNDZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojQzYzQzIyOyIgZD0iTTI0OS42ODgsMTk4aC03Mi4zOTV2LTgyLjVoMjguNDhjNi41NDksMCwxMi41MzYsMy43LDE1LjQ2NSw5LjU1OGwxMS43MjEsMjMuNDQybDE1LjAzNiwxMS40MzQgICAgYzUuMTA1LDMuMTQ5LDguMjEzLDguNzE4LDguMjEzLDE0LjcxNnYxNi44M0MyNTYuMjA4LDE5NS4wODEsMjUzLjI4OSwxOTgsMjQ5LjY4OCwxOTh6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjg2RTUxOyIgZD0iTTE4MS41LDE5OGgtMTMyVjk1LjE2NmMwLTYuOTk2LDUuNjcxLTEyLjY2NiwxMi42NjctMTIuNjY2aDEwNi42NjcgICAgYzYuOTk2LDAsMTIuNjY3LDUuNjcxLDEyLjY2NywxMi42NjZWMTk4SDE4MS41eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0UyNUQ0NzsiIGQ9Ik0xODEuNSw5NS4xNjdjMC02Ljk5Ni01LjY3MS0xMi42NjctMTIuNjY3LTEyLjY2N2gtMjAuNjY3VjE5OEgxODEuNVY5NS4xNjd6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRDBENUQ5OyIgZD0iTTIxMi41OTcsMTI2LjE5NUwyMjQsMTQ5aC0zM3YtMjdoMTQuODFDMjA4LjY4NCwxMjIsMjExLjMxMiwxMjMuNjI0LDIxMi41OTcsMTI2LjE5NXoiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSI4OS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9Ijg5LjI5MSIgY3k9IjE5OCIgcj0iOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojMzIzNzNCOyIgY3g9IjIyMS4yOTEiIGN5PSIxOTgiIHI9IjIzLjI5MSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojNDg0RjU0OyIgY3g9IjIyMS4yOTIiIGN5PSIxOTgiIHI9IjkiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6IzMyMzczQjsiIGN4PSIxMTYuNSIgY3k9Ijk5IiByPSIzOSIvPgoJPC9nPgoJPGc+CgkJPGNpcmNsZSBzdHlsZT0iZmlsbDojRUNGMEYxOyIgY3g9IjExNi41IiBjeT0iOTkiIHI9IjMxLjMxOCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6IzMyMzczQjsiIGQ9Ik0xMjguOTA3LDExMi41NDZjLTAuNzczLDAtMS41NTItMC4yNTUtMi4yLTAuNzc5bC0xMi40MDktMTAuMDQ2ICAgIEMxMTMuNDc3LDEwMS4wNTYsMTEzLDEwMC4wNTYsMTEzLDk5Vjc5LjVjMC0xLjkzMywxLjU2Ny0zLjUsMy41LTMuNXMzLjUsMS41NjcsMy41LDMuNXYxNy44M2wxMS4xMTEsOC45OTUgICAgYzEuNTAzLDEuMjE3LDEuNzM0LDMuNDIxLDAuNTE5LDQuOTIzQzEzMC45MzgsMTEyLjEwMywxMjkuOTI3LDExMi41NDYsMTI4LjkwNywxMTIuNTQ2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" /> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyOSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCiAgPGc+DQogICAgPGc++" /> <span>#1 &amp; #3 works in an img tag</span>