Douglas Dental

SVG Icons


Using inline svg

In a thumbnail


Paper airplane icon A simple folded paper airplane
caption text

Change the color


svg {
color: #253b7d;
}


Change the thumbnail


.TPthumbnail svg {
height: auto;
width: 40%;
}




In a column


Dental tools icon One dental mirror and two dental picks used for routine dental cleanings lined up side by side
Dental tools icon A dental mirror crossed over a dental pick
Dental tools icon Dental mirror and dental pick
Dentist icon Head of dentist wearing a face mask and head mirror
Dentist icon Bust of smiling dentist wearing a hat with a medical cross
Dentist icon Bust of a dentist wearing a face mask and head mirror

Make 'em the same height


.TPsvg-col svg {
height: 50px;
width: auto;
display: block;
margin: 0 auto;
}




In a row


Dental tools icon One dental mirror and two dental picks used for routine dental cleanings lined up side by side
Dental tools icon A dental mirror crossed over a dental pick
Dental tools icon Dental mirror and dental pick
Dentist icon Head of dentist wearing a face mask and head mirror
Dentist icon Bust of smiling dentist wearing a hat with a medical cross
Dentist icon Bust of a dentist wearing a face mask and head mirror

Make 'em respond


.TPsvg-row svg {
width: 100%;
height: 100%;
}




In a row and same column


American Association of Oral and Maxillofacial Surgeons logoAmerican Dental Association logoHealthgrades logoInternational College Of Dentists logoPacific Coast Society of Orthodontics logo

5 columns


.TPsvg-row-no-col svg {
width: 20%;
min-height: 192px; /*height of tallest icon*/
float: left;
padding: 0 15px;
}




In a row and same column and centered and wrapped


American Association of Oral and Maxillofacial Surgeons logoAmerican Dental Association logoHealthgrades logoInternational College Of Dentists logoPacific Coast Society of Orthodontics logo

5 columns centered w/ wrap


.TPsvg-row-no-col-center {
text-align: center;
}
.TPsvg-row-no-col-center svg {
width: 200px;
height: auto;
vertical-align: middle;
padding: 15px;
}




Animated


Diamond icon Faceted diamond radiating shine marks

Animate 'em


#TPsvg-diamond > g > path:nth-child(2), svg#TPsvg-diamond > g > path:nth-child(3) {
-webkit-animation: phase 2s ease-in-out .5s infinite alternate both;
-o-animation: phase 2s ease-in-out .5s infinite alternate both;
animation: phase 2s ease-in-out .5s infinite alternate both;
}
#TPsvg-diamond > g > path:nth-child(4), svg#TPsvg-diamond > g > path:nth-child(5) {
-webkit-animation: phase 2s ease-in-out .5s infinite alternate both;
-o-animation: phase 2s ease-in-out .0s infinite alternate both;
animation: phase 2s ease-in-out 0s infinite alternate both;
}
@keyframes phase {
0% {opacity: 0;}
15% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}
SVG Animations
weo logo for svgator
star
Copyright © 2015-2024 Douglas Dental and WEO Media (Touchpoint Communications LLC). All rights reserved.  Sitemap | Links
Douglas Dental, 2472 Mars st., Portland, OR 97229 : (208) 419-6001 : online-dds.com : 10/15/2024 : Page Phrases: dentist :