• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Icomoon SVG op website
PostPosted: Thu May 10, 2018 9:49 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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:
<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:
{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:
[[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:
<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:
<?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:
{svg icon="facebook icon-facebook-square"}


5. Voor de rechthoekige social media icoontjes heb ik een template 'socialButtons_flat' aangemaakt
Code:
<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}&amp;text={title}&amp;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:
<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/


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting