SVG Fonts – the learning

SVG Font creation and usage

Today I have been working on an online CV. I needed a button for downloading a PDF version of a PDF. I wanted it to fit in with the Font Awesome and Academicons that my theme uses.

WOFF usage

Another issue for me was the text font. I needed to display some combining diacritics with a clear font.

CSS Alert Messages

I found this great css messages code here (read about it for a fuller explanation):

/* CSS messages */

.alert { background: #fff6bf url('exclamation.png') 15px 50% no-repeat; padding: 5px 20px 5px 45px; border-top: 2px solid #ffd324; border-bottom: 2px solid #ffd324; }
.info { background: #f8fafc url('information.png') 15px 50% no-repeat; padding: 5px 20px 5px 45px; border-top: 2px solid #b5d4fe; border-bottom: 2px solid #b5d4fe; }
.download { background: #cfc url('download.png') 15px 50% no-repeat; padding: 5px 20px 5px 45px; border-top: 2px solid #3C6; border-bottom: 2px solid #3C6; }
.german { background: transparent url('de.png') 15px 50% no-repeat; padding: 5px 20px 5px 45px; }
.english { background: transparent url('gb.png') 15px 50% no-repeat; padding: 5px 20px 5px 45px; }

Or more Explicitly here:

http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/bioneural.css