Icomoon SVG op website

Een board om T&T's te plaatsen m.b.t. CMSMS, PHP of Smarty

Moderator: velden

Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Icomoon SVG op website

Post by Gregor »

Op mijn site had ik op verschillende plaatsen de buttons van diverse social media staan. In het zoeken naar mogelijkheden om de laadtijd te verlagen heb ik deze buttons op verschillende plaatsen voor icoontjes waar een url achter zit. Daarnaast wilde ik van de Font Awsome icoontjes af omdat ik met de daarbij behorende bestanden veel meer meekrijg dan ik nodig heb.

In dit topic laat ik zien wat ik daarvoor zoal heb gedaan.

1. Bij https://icomoon.io/app/#/select heb ik de icoontjes geselecteerd die ik op mijn site gebruik. Via de button onderaan die site 'Generate SVG & More' heb ik de bestanden gedownload waarmee ik de SVG files kan gebruiken.

2. Vervolgens een 'generic page template' iconFonts gemaakt met daarin een deel van de code die in demo.html (download SVG bestanden) staat:
Ik laat ter illustratie een deel van de code zien.

Code: Select all

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-sailing-boat-water" viewBox="0 0 32 32">
<title>sailing-boat-water</title>
<path d="M21.671 23h0.329c2.209 0 3.999-1.795 3.999-4h-10v-15h-1v15h-10c0 0.876 0.282 1.686 0.759 2.345 3.661-1.772 7.586-1.975 11.486 0.219 1.515 0.852 2.993 1.312 4.426 1.436v0 0zM26 18h-9v-9l9 9zM8 9.5c-3 5-3 8.5-3 8.5h9c0 0-1-1.5-1-6s1-8 1-8c0 0-3 0.5-6 5.5v0zM3 25c0.432-0.319 0.901-0.634 1.405-0.934 4.032-2.406 8.441-2.965 12.82-0.502 4.021 2.262 7.786 1.761 11.12-0.452 0.623-0.414 1.177-0.857 1.655-1.299v1.322c-0.341 0.277-0.709 0.549-1.102 0.81-3.622 2.405-7.778 2.957-12.164 0.491-4.022-2.262-8.065-1.75-11.817 0.489-0.713 0.425-1.353 0.881-1.911 1.336-0.002 0.002-0.004 0.003-0.006 0.005v-1.266zM5.979 26.232c3.592-1.665 7.43-1.813 11.245 0.333 3.481 1.958 6.771 1.846 9.755 0.344v1.109c-3.143 1.433-6.616 1.46-10.245-0.581-3.645-2.050-7.307-1.822-10.755-0.094v-1.11z"></path>
</symbol>
<symbol id="icon-home3" viewBox="0 0 32 32">
<title>home3</title>
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
</symbol>
<symbol id="icon-camera" viewBox="0 0 32 32">
<title>camera</title>
<path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path>
</symbol>
.
.
.
</defs>
</svg>
Net na de </__body>-tag heb ik de volgende tag geplaatst:

Code: Select all

{include|strip file='cms_template:iconFonts'}
3. Daarna heb ik de stylesheet 'iconFonts' gemaakt waarin de basis styling van de icoontjes staan, maar ook de styling hoe ik het op de site wil hebben. Voor de social media icoontjes heb ik een rechthoekige en een ronde variant gemaakt (het is nogal veel code, voor het idee wel alles geplaatst ;)

Code: Select all

[[strip]]
.social-container  {
    display: flex;
    flex-direction: row;
    [[* flex-wrap: wrap; *]]
    justify-content: space-between;
    min-height: 0%;
    flex: 1 1 auto;
}
.nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.social-container a {
    margin-right: 5px;
}
.svg {
}
a.svg, a.arrow {
    position: relative;
    display: inline-flex;
    min-width: 0;
}
a.arrow {
    text-decoration-line: none;
}
a.svg {
    text-decoration-line: none;
    position: relative;
}

a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

.social-container a svg {
   margin-bottom: 1px;
}

:root {
	/* https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables */
  --fill-color-facebook: #3b5998;
  --fill-color-twitter: #4da7de;
  --fill-color-pinterest: #b51205;
  --fill-color-linkedin: #3371b7;
  --fill-color-google-plus: #c93725;
  --fill-color-rss: #f26109;
  --Font-Size: 20px;
}

.cirkel {
    background: #3b5998; 
    padding: 0.2em;
    display: inline-flex;
    line-height: 0;
    -webkit-border-radius: 99%;
    -moz-border-radius: 99%;
    border-radius: 99%;
    font-size: 2em;
    margin-bottom: 5px;
}

.cirkel:hover {
    /* background-color: brown; -->> brings a square background */
}
.cirkel.fb-background {
    background: var(--fill-color-facebook);
}
.cirkel.tw-background {
    background-color: var(--fill-color-twitter)
}
.cirkel.pi-background {
    background-color: var(--fill-color-pinterest);
}
.cirkel.gp-background {
    background-color: var(--fill-color-google-plus);
    padding-top: 6px;
}
.cirkel.rs-background {
    background-color: var(--fill-color-rss);
    padding-top: 6px;
}

.square {
    --Width: 2.5em;
    display: inline-flex;
    /* height: 25px;
    line-height: 30px; */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: var(--Font-Size);
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    width: var(--Width);
    padding-left: calc(var(--Width)/3);
   }
.square.fb-background {
    background: var(--fill-color-facebook);
}
.square.tw-background {
    background-color: var(--fill-color-twitter);
}
.square.pi-background {
    background-color: var(--fill-color-pinterest);
}
.square.gp-background {
    background-color: var(--fill-color-google-plus);
    padding-top: 3px;
}

.flex-item {
    height: 5%;
}
.name{
  font-size: 0.5em;
  margin-left: 1em;
}

/* styling individual icons */
.icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    font-family:si!important; 
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -o-transition-property: transform;
    -transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    background-color: none;
    text-decoration: none;
} 

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */

.icon-home3 {
    color:blue;
}
.icon-arrow-left2, .icon-arrow-right2 {
    width: 30px;
    min-height: 0vh;
    margin-top: 4px;
}
.icon-arrow-left2:hover, .icon-arrow-right2:hover {
    background-color:#013e75;
    color: white;
}

.icon-facebook:before {
    content:'\e041';
}

.icon-facebook {
}
.icon-facebook, .icon-twitter, .icon-pinterest2, .icon-google-plus, .icon-linkedin2, .icon-rss {
    fill: white;
}

.icon-facebook-square, .icon-twitter-square, .icon-pinterest2-square, .icon-google-plus-square {
    text-align: center;
    font-size: var(--Font-Size);
    fill: white
}
.icon-google-plus:before {
    content:'\e042';
}
.icon-google-plus {
     
}
.icon-google-plus:hover {
}

.icon-linkedin2:before {
    content:'\e049';
}
.icon-linkedin2 {
    background-color: #3371b7;
}
.icon-linkedin2:hover {
    [[* background-color: #1f5da3; *]]
}
.icon-pinterest2:before {
    content:'\e043';
}
.icon-pinterest2 {
    fill: white;

}
.icon-pinterest:hover {
    
}

.icon-price-tag {
    width: 20px;
    height: 25px;
    display: inline;
    padding-top: 5px;
}
.icon-search {
    font-size: 200%;
    margin-left: 30%;
}
.icon-search:hover {
    fill: [[$theme_color]];
}
[[* same styling icons used in text heading tag <H4> *]]
.icon-price-tags, .icon-camera, .icon-bubbles {
    fill: white;
}

.icon-search, .CGBlogDetailInfo .icon-bubbles {
    fill: #ccc;
}

.CGBlogDetailInfo .icon-bubbles {
   	bottom: -7px;
    width: 1em;
}

.icon-sailing-boat-water {
    fill: [[$theme_color]];
}
.icon-price-tags, .icon-camera, .icon-bubbles {
    height: 25px;
    display: inline;
    padding-top: 4px;
    width: 30px;
    min-height: 0vh;
}
.icon-rss:before {
    content:'\e00b';
}
.icon-rss {
}
.icon-rss:hover {
}

.icon-search:hover {
    fill: [[$theme_color]];
}
.icon-twitter:before {
    content:'\e040';
}

.icon-twitter {

}
.icon-twitter:hover {
}
[[/strip]]
4. Een icoon roep je aan met:

Code: Select all

<svg preserveAspectRatio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
Hier heb ik een php-scriptje 'svg' voor gemaakt die voor mij deze code genereert:

Code: Select all

<?php
// A simple function to embed SVG icons on the page
// Simply outputs the appropriate <svg> element and assumes you have already inluded/linked 
//
// Based on idea by Calguy1000: funcation.fa.php
// Place in /assets/plugins/function.svg.php
// Use 'use' param for shorthand
// Use 'icon' param for full/spaces
// <svg preserveAspectRatio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg>
// Examples:  
//		{svg use="google-plus"}
//		{svg icon="google-plus"}

function smarty_function_svg($params, &$smarty) {
	$href = isset($params['icon']) ? strtok($params['icon'], ' '): $params['use']; // if 'icon' is used, we only need the first string
	$icon = get_parameter_value($params, 'use');
	$icon = get_parameter_value($params, 'icon', "icon-".$icon);
	return "<svg preserveAspectRatio=\"none\" class=\"icon {$icon}\"><use xlink:href=\"#icon-{$href}\"></use></svg>";
}
De aanroep wordt dan:

Code: Select all

{svg icon="facebook icon-facebook-square"}
5. Voor de rechthoekige social media icoontjes heb ik een template 'socialButtons_flat' aangemaakt

Code: Select all

<h4>Deel deze pagina</h4>

{if !(isset($canonical))}
  {$canonical = {$content_obj->GetURL()}}
{/if}
<span class="social-container">
    <a href="http://www.facebook.com/sharer.php?u={$canonical}" target="_blank" class="svg">
       <span class="square fb-background">{svg icon="facebook icon-facebook-square"}</span>
    </a>
    <a href="https://twitter.com/share?url={canonical}&text={title}&hashtags=uisgebeatha" target="popup" onclick="window.open('https://www.twitter.com','name','width=600,height=400')" class="svg">
       <span class="square tw-background">{svg icon="twitter icon-twitter-square"}</span>
    </a>
    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" class="svg">
       <span class="square pi-background">{svg icon="pinterest2 icon-pinterest2-square"}</span>
    </a>
    <a href="https://plus.google.com/share?url={$canonical}" target="_blank" class="svg">
       <span class="square gp-background">{svg icon="google-plus icon-google-plus-square"}</span>
    </a>
</span>
Voor de cirkel-vormige social media icons heb ik template 'social-Icons-footer' aangemaakt:

Code: Select all

<span class="social-container">
    <a  href="{$facebook}" target="_blank" rel="noopener">
        <span class="cirkel fb-background">{svg use="facebook"}</span>
    </a>
    <a href="{$twitter}" target="_blank" rel="noopener">
        <span class="cirkel tw-background">{svg use="twitter"}</span>
    </a>
    <a href="{$google}" target="_blank" rel="noopener">
        <span class="cirkel gp-background">{svg use="google-plus"}</span>
    </a>
    <a href="{$pinterest}" target="_blank" rel="noopener">
        <span class="cirkel pi-background">{svg use="pinterest2"}</span>
	</a>
    <a  href="{$feed}" target="_blank" rel="noopener">
        <span class="cirkel rs-background">{svg use="rss"}</span></a>
</span>
Een werkend voorbeeld van het bovenstaande is te vinden op https://www.uisge-beatha.eu/
Post Reply

Return to “Tips en Trucs”