Icons

Main Icons

---

Black

---

Colored

Social

---

Black

---

Colored

---

<!-- init.php -->
function svg($svgName, $svgClassName){
    return '<svg class="icon '.$svgClassName.'">
				<use xlink:href="/img/svgdefs.svg'.('?v='.filemtime($_SERVER['DOCUMENT_ROOT'].'/img/svgdefs.svg')).'#'.$svgName.'" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
           </svg>';
}

<!-- img/svgdefs.svg -->
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="iconCalendar" viewBox="0 0 32 32">
			<path d="M27 31h-22c-1.104 0-2-0.896-2-2v-22c0-1.105 0.896-2 2-2h2v1c0 1.657 1.343 3 3 3s3-1.343 3-3v-1h6v1c0 1.657 1.344 3 3 3s3-1.343 3-3v-1h2c1.104 0 2 0.895 2 2v22c0 1.104-0.896 2-2 2zM27 12h-22v17h22v-17zM10 17h-3v-3h3v3zM10 22h-3v-3h3v3zM10 27h-3v-3h3v3zM15 17h-3v-3h3v3zM15 22h-3v-3h3v3zM15 27h-3v-3h3v3zM20 17h-3v-3h3v3zM20 22h-3v-3h3v3zM20 27h-3v-3h3v3zM25 17h-3v-3h3v3zM25 22h-3v-3h3v3zM25 27h-3v-3h3v3zM21.969 8c-1.088 0-1.969-0.882-1.969-1.969v-2.062c0-1.088 0.881-1.969 1.969-1.969s1.969 0.881 1.969 1.969v2.062c0 1.087-0.881 1.969-1.969 1.969zM9.969 8c-1.088 0-1.969-0.882-1.969-1.969v-2.062c0-1.088 0.881-1.969 1.969-1.969s1.969 0.881 1.969 1.969v2.062c0 1.087-0.882 1.969-1.969 1.969z"></path>
		</symbol>
	</defs>
</svg>

[class^="icon_"],[class*=" icon_"],.icon{display:inline-block;width:1em;height:1em;fill:currentColor}
.icon{line-height:0}

[class^="icon_"], [class*=" icon_"], .icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.icon {
	line-height: 0;
}

<!-- init.php -->
<?php
$contactPage['value'] = 'https://www.facebook.com
https://www.instagram.com/
https://google.com
https://youtube.com
https://linkedin.com
https://twitter.com';
$temp = explode(PHP_EOL, $contactPage['value']);
foreach ($temp as $t) {
	if (strpos($t, 'facebook.com') == true) $Cfacebook = $t;
	if (strpos($t, 'instagram.com') == true) $Cinstagram = $t;
	if (strpos($t, 'google.com') == true) $Cgoogle = $t;
	if (strpos($t, 'youtube.com') == true) $Cyoutube = $t;
	if (strpos($t, 'linkedin.com') == true) $Clinkedin = $t;
	if (strpos($t, 'twitter.com') == true) $Ctwitter = $t;
}
?>

<div class="social">
    <?php if (isset($Cfacebook) && !empty($Cfacebook)): ?>
    <a href="<?= $Cfacebook ?>" target="_blank" class="social_block" >
        <?= svg('iconFacebookC2','')?>
    </a>
    <?php endif; ?>

    <?php if (isset($Cinstagram) && !empty($Cinstagram)): ?>
    <a href="<?= $Cinstagram ?>" target="_blank" class="social_block" >
        <img src="/img/instagram-c.svg" alt="instagram logo">
    </a>
    <?php endif; ?>

    <?php if (isset($Cgoogle) && !empty($Cgoogle)): ?>
    <a href="<?= $Cgoogle ?>" target="_blank" class="social_block" >
        <?= svg('iconGoogleC','')?>
    </a>
    <?php endif; ?>

    <?php if (isset($Cyoutube) && !empty($Cyoutube)): ?>
    <a href="<?= $Cyoutube ?>" target="_blank" class="social_block" >
        <?= svg('iconYtPlC','')?>
    </a>
    <?php endif; ?>

    <?php if (isset($Clinkedin) && !empty($Clinkedin)): ?>
    <a href="<?= $Clinkedin ?>" target="_blank" class="social_block" >
        <?= svg('iconLinkedinC','')?>
    </a>
    <?php endif; ?>

    <?php if (isset($Ctwitter) && !empty($Ctwitter)): ?>
    <a href="<?= $Ctwitter ?>" target="_blank" class="social_block" >
        <?= svg('iconTwitterC','')?>
    </a>
    <?php endif; ?>
</div>

.social{font-size:0;line-height:0}
.social .social_block{display:inline-block;line-height:0;margin:0 1rem 0 0}
.social .social_block:last-child{margin:0}
.social .social_block .icon,.social .social_block img{width:2.4rem;height:2.4rem;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
    .social .social_block:hover .icon,.social .social_block:hover img{padding:.2rem}
}

.social {
	font-size: 0;
	line-height: 0;

	.social_block {
		display: inline-block;
		line-height: 0;
		margin:0 1rem 0 0;

		&:last-child {
			margin: 0;
		}

		.icon, img {
			width: 2.4rem;
			height: 2.4rem;
			transition: all 0.3s ease-in-out;
		}

	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.social {
		.social_block {
			&:hover {
				.icon, img {
					padding: .2rem;
				}
			}
		}
	}
}