CODEWITHSUNDEEP
htmlcsssvg
Lightheaded
Lightheaded

Reputation: 653

CSS: SVG as content works for Chrome but not Firefox

In Firefox the SVG icon won't display. It is displayed in every other browser. Any idea why? Is this not meant to be supported?

HAML

.contact-form__error
  .contact-form__error--icon
  .contact-form__error--text Something went wrong. Please try again later.

CSS

.contact-form__error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  position: absolute;
  line-height: 1em;
}
.contact-form__error--icon {
  // content: image-url('icons/alert_error.svg');
  content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
  width: 15px;
  height: 15px;
  vertical-align: text-bottom;
  margin-right: 4px;
  display: inline-block;
}
.contact-form__error--text {
  display: inline-block;
  vertical-align: middle;
}

http://codepen.io/Lightheaded/pen/NGZWyj

Upvotes: 0

Views: 250

Answers (1)

pilola
pilola

Reputation: 81

Attach it on :before or :after instead

.contact-form__error--icon:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
}

http://codepen.io/anon/pen/WQqbbM

Upvotes: 3

Related Questions