[!!!][FEATURE] Remove fontawesome dependency

All Icons are now delivered by default as svgs and are rendered inline, this makes them easy to style and adjust. New templates have been introduced that only delivers the markup for the icons. This can be overwritten if you want to exchange the icons used. Default avatar size was also slightly increased to better match renderings. Templates added: * Partials/General/BlogIcons.html * Partials/General/SocialIcons.html Templates changed: * Partials/Archive/Menu.html * Partials/Post/Author.html * Partials/Post/Meta.html * Templates/Post/ListPostsByAuthor.html * Templates/Post/ListPostsByCategory.html * Templates/Post/ListPostsByDate.html * Templates/Post/ListPostsByTag.html Releases: master
TYPO3GmbH · May 30, 2019 · 4bf2ae8 · 4bf2ae8
1 parent f52b38a
commit 4bf2ae8
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 41 deletions.
diff --git a/Build/blog_template_test/Configuration/TypoScript/setup.typoscript b/Build/blog_template_test/Configuration/TypoScript/setup.typoscript
@@ -65,8 +65,6 @@ page {
     includeCSS {
         bootstrap = https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css
         bootstrap.external = 1
-        fontawesome = https://use.fontawesome.com/releases/v5.7.2/css/all.css
-        fontawesome.external = 1
     }
 
     includeJSFooterlibs {

diff --git a/Resources/Private/Partials/Archive/Menu.html b/Resources/Private/Partials/Archive/Menu.html
@@ -8,7 +8,7 @@
                             {year}
                         </blogvh:link.archive>
                         <blogvh:link.archive class="archive-item-year-rss" rss="true" year="{year}" title="{year}">
-                            <i class="fa fa-rss-square"></i>
+                            <span class="blogicon"><f:render partial="General/SocialIcons" section="Rss" optional="true" /></span>
                         </blogvh:link.archive>
                         <f:if condition="{settings.widgets.archive.groupByMonth} == 1">
                             <ul>
@@ -41,7 +41,7 @@
             </f:if>
         </blogvh:link.archive>
         <blogvh:link.archive class="archive-item-month-rss" rss="true" year="{year}" month="{month.month}" title="{year}">
-            <i class="fa fa-rss-square"></i>
+            <span class="blogicon"><f:render partial="General/SocialIcons" section="Rss" optional="true" /></span>
         </blogvh:link.archive>
     </li>
 </f:section>
diff --git a/Resources/Private/Partials/General/BlogIcons.html b/Resources/Private/Partials/General/BlogIcons.html
@@ -0,0 +1,12 @@
+<f:section name="Author">
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M13.687 11.587c-1.476-.421-2.507-.998-3.533-1.394-.099-.322-.333-.893-.39-2.205.706-.712 1.212-1.716 1.212-2.525V3.537C10.976 2.137 9.838 1 8.35 1h-.7c-1.4 0-2.626 1.137-2.626 2.537v1.926c0 .816.512 1.831 1.228 2.544-.024 1.288-.266 1.856-.381 2.178-1.035.394-2.071.979-3.558 1.403 0 0-1.226.7-1.313 3.413h14c-.087-2.801-1.313-3.414-1.313-3.414z"/></g></svg>
+</f:section>
+<f:section name="Comment">
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M3 3h10v8.75L11 10H3V3M2 2v9h8.5l3.5 3V2H2z"/><path d="M4 4h8v2H4zM4 7h6v1H4z"/></g></svg>
+</f:section>
+<f:section name="Published">
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M8 2.6c3.1 0 5.4 2.4 5.4 5.4S11 13.4 8 13.4 2.5 11.1 2.5 8 4.9 2.6 8 2.6M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z"/><path d="M7 4.1V8l4.1 2.5c.2-.3.4-.5.5-.9L8 7.4V4c-.3 0-.7.1-1 .1z"/></g></svg>
+</f:section>
+<f:section name="Tag">
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M6.657 1H1v5.656l8.485 8.485 5.657-5.657L6.657 1zM1.99 6.232V1.99h4.243l7.495 7.494-4.243 4.243L1.99 6.232z"/><path d="M3.475 3.475A1.75 1.75 0 1 0 5.952 5.95a1.75 1.75 0 0 0-2.477-2.475zm.707.707a.75.75 0 1 1 1.061 1.06.75.75 0 0 1-1.061-1.06zM6.126 8.602l2.475-2.475 3.535 3.536-2.475 2.474z"/></g></svg>
+</f:section>
diff --git a/Resources/Private/Partials/General/SocialIcons.html b/Resources/Private/Partials/General/SocialIcons.html
@@ -1,12 +1,15 @@
 <f:section name="LinkedIn">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 0H48C21.6 0 0 21.6 0 48v416c0 26.4 21.6 48 48 48h416c26.4 0 48-21.6 48-48V48c0-26.4-21.6-48-48-48zM192 416h-64V192h64v224zm-32-256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm256 256h-64V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v128h-64V192h64v39.7c13.2-18.1 33.4-39.7 56-39.7 39.8 0 72 35.8 72 80v144z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M464 0H48C21.6 0 0 21.6 0 48v416c0 26.4 21.6 48 48 48h416c26.4 0 48-21.6 48-48V48c0-26.4-21.6-48-48-48zM192 416h-64V192h64v224zm-32-256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm256 256h-64V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v128h-64V192h64v39.7c13.2-18.1 33.4-39.7 56-39.7 39.8 0 72 35.8 72 80v144z"/></g></svg>
+</f:section>
+<f:section name="Rss">
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><circle cx="70.22" cy="441.78" r="70.22"/><path d="M339.38 512h-99.47C239.91 379.5 132.5 272.09 0 272.09v-99.47c187.44 0 339.38 151.94 339.38 339.38z"/><path d="M409.6 512c0-226.22-183.38-409.6-409.6-409.6V0c282.77 0 512 229.23 512 512H409.6z"/></g></svg>
 </f:section>
 <f:section name="Twitter">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 97.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5C412 60.7 384.7 48 354.5 48c-58 0-105 47-105 105 0 8.2.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-.5-33.4-5.3-47.6-13.1v1.3c0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-.5-25.1-1.5C46.6 446.7 101.8 464 161.1 464c193.2 0 298.8-160.1 298.8-298.8 0-4.6-.1-9.1-.3-13.6 20.5-14.8 38.3-33.3 52.4-54.4z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M512 97.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5C412 60.7 384.7 48 354.5 48c-58 0-105 47-105 105 0 8.2.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-.5-33.4-5.3-47.6-13.1v1.3c0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-.5-25.1-1.5C46.6 446.7 101.8 464 161.1 464c193.2 0 298.8-160.1 298.8-298.8 0-4.6-.1-9.1-.3-13.6 20.5-14.8 38.3-33.3 52.4-54.4z"/></g></svg>
 </f:section>
 <f:section name="Website">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm221 256c0 19.3-2.5 38.2-7.3 56.5h-88.9c2-18.2 3.1-37.1 3.1-56.5 0-20.1-1.2-39.7-3.4-58.5H469c5.4 18.9 8 38.5 8 58.5zM256 477c-19.7 0-41.8-20.8-59.2-55.6-10.4-20.8-18.7-45.4-24.5-73-.1-.3-.1-.6-.2-.9h167.8c-.1.3-.1.6-.2.9-5.8 27.6-14.1 52.1-24.5 73-17.4 34.8-39.5 55.6-59.2 55.6zm-89.6-164.5c-2.2-18.3-3.4-37.2-3.4-56.5 0-20 1.2-39.5 3.6-58.5h178.8c2.4 19 3.6 38.5 3.6 58.5 0 19.3-1.1 38.2-3.4 56.5H166.4zm-124.1 0C37.5 294.2 35 275.3 35 256c0-20 2.6-39.6 7.8-58.5h88.5c-2.2 18.8-3.4 38.4-3.4 58.5 0 19.4 1.1 38.3 3.1 56.5H42.3zM256 35c19.7 0 41.8 20.8 59.2 55.6 10.3 20.6 18.4 44.7 24.3 71.9h-167c5.8-27.1 14-51.3 24.3-71.9C214.2 55.8 236.3 35 256 35zm156.3 64.7c18.4 18.4 33.1 39.5 44 62.8h-81.1c-9.1-46.3-24.7-86-44.6-114.6 3.9 1.4 7.7 2.9 11.5 4.5 26.2 11.1 49.9 27 70.2 47.3zm-312.6 0c20.3-20.3 44-36.2 70.3-47.3 3.8-1.6 7.6-3.1 11.5-4.5-19.9 28.6-35.6 68.3-44.6 114.6H55.7c10.9-23.3 25.7-44.4 44-62.8zm0 312.6c-18.9-18.9-34-40.7-45-64.8h81.7c9 47.2 24.8 87.6 45 116.6-3.9-1.4-7.7-2.9-11.5-4.5-26.2-11.1-49.9-27-70.2-47.3zm312.6 0c-20.3 20.3-43.9 36.2-70.3 47.4-3.8 1.6-7.6 3.1-11.5 4.5 20.2-29 36-69.4 45-116.6h81.7c-10.9 24-26 45.8-44.9 64.7z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm221 256c0 19.3-2.5 38.2-7.3 56.5h-88.9c2-18.2 3.1-37.1 3.1-56.5 0-20.1-1.2-39.7-3.4-58.5H469c5.4 18.9 8 38.5 8 58.5zM256 477c-19.7 0-41.8-20.8-59.2-55.6-10.4-20.8-18.7-45.4-24.5-73-.1-.3-.1-.6-.2-.9h167.8c-.1.3-.1.6-.2.9-5.8 27.6-14.1 52.1-24.5 73-17.4 34.8-39.5 55.6-59.2 55.6zm-89.6-164.5c-2.2-18.3-3.4-37.2-3.4-56.5 0-20 1.2-39.5 3.6-58.5h178.8c2.4 19 3.6 38.5 3.6 58.5 0 19.3-1.1 38.2-3.4 56.5H166.4zm-124.1 0C37.5 294.2 35 275.3 35 256c0-20 2.6-39.6 7.8-58.5h88.5c-2.2 18.8-3.4 38.4-3.4 58.5 0 19.4 1.1 38.3 3.1 56.5H42.3zM256 35c19.7 0 41.8 20.8 59.2 55.6 10.3 20.6 18.4 44.7 24.3 71.9h-167c5.8-27.1 14-51.3 24.3-71.9C214.2 55.8 236.3 35 256 35zm156.3 64.7c18.4 18.4 33.1 39.5 44 62.8h-81.1c-9.1-46.3-24.7-86-44.6-114.6 3.9 1.4 7.7 2.9 11.5 4.5 26.2 11.1 49.9 27 70.2 47.3zm-312.6 0c20.3-20.3 44-36.2 70.3-47.3 3.8-1.6 7.6-3.1 11.5-4.5-19.9 28.6-35.6 68.3-44.6 114.6H55.7c10.9-23.3 25.7-44.4 44-62.8zm0 312.6c-18.9-18.9-34-40.7-45-64.8h81.7c9 47.2 24.8 87.6 45 116.6-3.9-1.4-7.7-2.9-11.5-4.5-26.2-11.1-49.9-27-70.2-47.3zm312.6 0c-20.3 20.3-43.9 36.2-70.3 47.4-3.8 1.6-7.6 3.1-11.5 4.5 20.2-29 36-69.4 45-116.6h81.7c-10.9 24-26 45.8-44.9 64.7z"/></g></svg>
 </f:section>
 <f:section name="Xing">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M77.8 101.1c-4.4 0-8.2 1.6-10.1 4.6-1.9 3.2-1.6 7.2.4 11.3l49.9 86.4c.1.2.1.3 0 .4L39.6 342.3c-2 4.1-1.9 8.2 0 11.3 1.9 3 5.2 5 9.6 5H123c11 0 16.4-7.5 20.1-14.3 0 0 76.7-135.7 79.7-141-.3-.5-50.8-88.5-50.8-88.5-3.7-6.5-9.2-13.8-20.6-13.8l-73.6.1zM388 0c-11 0-15.8 6.9-19.8 14.1 0 0-159.1 282-164.3 291.3.3.5 104.9 192.5 104.9 192.5 3.7 6.5 9.3 14.1 20.6 14.1h73.8c4.4 0 7.9-1.7 9.8-4.7 2-3.2 1.9-7.3-.2-11.4l-104-190.3c-.1-.2-.1-.3 0-.5l163.5-289c2-4.1 2.1-8.2.2-11.4-1.9-3-5.4-4.7-9.8-4.7H388z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" aria-hidden="true" role="img" focusable="false"><g fill="currentColor"><path d="M77.8 101.1c-4.4 0-8.2 1.6-10.1 4.6-1.9 3.2-1.6 7.2.4 11.3l49.9 86.4c.1.2.1.3 0 .4L39.6 342.3c-2 4.1-1.9 8.2 0 11.3 1.9 3 5.2 5 9.6 5H123c11 0 16.4-7.5 20.1-14.3 0 0 76.7-135.7 79.7-141-.3-.5-50.8-88.5-50.8-88.5-3.7-6.5-9.2-13.8-20.6-13.8l-73.6.1zM388 0c-11 0-15.8 6.9-19.8 14.1 0 0-159.1 282-164.3 291.3.3.5 104.9 192.5 104.9 192.5 3.7 6.5 9.3 14.1 20.6 14.1h73.8c4.4 0 7.9-1.7 9.8-4.7 2-3.2 1.9-7.3-.2-11.4l-104-190.3c-.1-.2-.1-.3 0-.5l163.5-289c2-4.1 2.1-8.2.2-11.4-1.9-3-5.4-4.7-9.8-4.7H388z"/></g></svg>
 </f:section>
diff --git a/Resources/Private/Partials/Post/Author.html b/Resources/Private/Partials/Post/Author.html
@@ -20,31 +20,31 @@
                     <f:if condition="{author.website}">
                         <a href="{author.website}" class="postauthor__sociallink postauthor__sociallink--website" target="_blank" itemprop="url">
                             <span class="postauthor__sociallinkicon postauthor__sociallinkicon--website">
-                                <f:render partial="General/SocialIcons" section="Website" optional="true" />
+                                <span class="blogicon"><f:render partial="General/SocialIcons" section="Website" optional="true" /></span>
                             </span>
                             <span class="postauthor__sociallinklabel"><f:translate key="author.social.website" /></span>
                         </a>
                     </f:if>
                     <f:if condition="{author.twitter}">
                         <a href="https://twitter.com/{author.twitter}" class="postauthor__sociallink postauthor__sociallink--twitter" target="_blank" itemprop="url">
                             <span class="postauthor__sociallinkicon postauthor__sociallinkicon--twitter">
-                                <f:render partial="General/SocialIcons" section="Twitter" optional="true" />
+                                <span class="blogicon"><f:render partial="General/SocialIcons" section="Twitter" optional="true" /></span>
                             </span>
                             <span class="postauthor__sociallinklabel"><f:translate key="author.social.twitter" /></span>
                         </a>
                     </f:if>
                     <f:if condition="{author.linkedin}">
                         <a href="{author.linkedin}" class="postauthor__sociallink postauthor__sociallink--linkedin" target="_blank" itemprop="url">
                             <span class="postauthor__sociallinkicon postauthor__sociallinkicon--linkedin">
-                                <f:render partial="General/SocialIcons" section="LinkedIn" optional="true" />
+                                <span class="blogicon"><f:render partial="General/SocialIcons" section="LinkedIn" optional="true" /></span>
                             </span>
                             <span class="postauthor__sociallinklabel"><f:translate key="author.social.linkedin" /></span>
                         </a>
                     </f:if>
                     <f:if condition="{author.xing}">
                         <a href="{author.xing}" class="postauthor__sociallink postauthor__sociallink--xing" target="_blank" itemprop="url">
                             <span class="postauthor__sociallinkicon postauthor__sociallinkicon--xing">
-                                <f:render partial="General/SocialIcons" section="Xing" optional="true" />
+                                <span class="blogicon"><f:render partial="General/SocialIcons" section="Xing" optional="true" /></span>
                             </span>
                             <span class="postauthor__sociallinklabel"><f:translate key="author.social.xing" /></span>
                         </a>

diff --git a/Resources/Private/Partials/Post/Meta.html b/Resources/Private/Partials/Post/Meta.html
@@ -15,7 +15,8 @@
         <span itemprop="keywords">
             <f:for each="{post.tags}" as="postTag">
                 <blogvh:link.tag tag="{postTag}" class="label label-default label-tag">
-                    <span><i class="fa fa-tag"></i> {postTag.title}</span>
+                    <span class="blogicon"><f:render partial="General/BlogIcons" section="Tag" optional="true" /></span>
+                    <span>{postTag.title}</span>
                 </blogvh:link.tag>
             </f:for>
         </span>

diff --git a/Resources/Private/Scss/components/_author.scss b/Resources/Private/Scss/components/_author.scss
@@ -35,27 +35,19 @@
     margin-right: .25rem;
 }
 .postauthor__social {
-    line-height: 1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
     margin-top: .25rem;
     + .postauthor__actions {
         margin-top: .5rem;
     }
 }
 .postauthor__sociallink {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 0.5rem;
 }
-.postauthor__sociallinkicon {
-    display: inline-block;
-    vertical-align: middle;
-    height: 1rem;
-    width: 1rem;
-    svg {
-        display: block;
-        height: 100%;
-        width: 100%;
-    }
-}
 .postauthor__sociallinklabel {
     position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px) !important;

diff --git a/Resources/Private/Scss/components/_icons.scss b/Resources/Private/Scss/components/_icons.scss
@@ -0,0 +1,13 @@
+/**
+ * Icons
+ */
+.blogicon {
+    top: .125em;
+    position: relative;
+    display: inline-flex;
+    align-self: center;
+    svg {
+        height:1em;
+        width:1em;
+    }
+}
diff --git a/Resources/Private/Scss/frontend.scss b/Resources/Private/Scss/frontend.scss
@@ -3,6 +3,7 @@
  */
 @import "components/author";
 @import "components/badge";
+@import "components/icons";
 @import "components/comment";
 @import "components/pagination";
 @import "components/widget";

diff --git a/Resources/Private/Templates/Backend/SocialImageWizard.html b/Resources/Private/Templates/Backend/SocialImageWizard.html
@@ -33,8 +33,8 @@ <h3>Facebook / Twitter / Google Plus</h3>
                         </div>
                     </div>
                 </div>
-                <a href="#" class="btn btn-default js-download-link"><i class="fa fa-download"></i> Download</a>
-                <a href="#" class="btn btn-primary js-save-link"><i class="fa fa-floppy-o"></i> Save in record</a>
+                <a href="#" class="btn btn-default js-download-link"><core:icon identifier="actions-download" alternativeMarkupIdentifier="inline" /> Download</a>
+                <a href="#" class="btn btn-primary js-save-link"><core:icon identifier="actions-save" alternativeMarkupIdentifier="inline" /> Save in record</a>
             </div>
         </div>
         <div class="col-xs-12 col-md-6">
@@ -58,8 +58,8 @@ <h3>LinkedIn</h3>
                         </div>
                     </div>
                 </div>
-                <a href="#" class="btn btn-default js-download-link"><i class="fa fa-download"></i> Download</a>
-                <a href="#" class="btn btn-primary js-save-link"><i class="fa fa-floppy-o"></i> Save in record</a>
+                <a href="#" class="btn btn-default js-download-link"><core:icon identifier="actions-download" alternativeMarkupIdentifier="inline" /> Download</a>
+                <a href="#" class="btn btn-primary js-save-link"><core:icon identifier="actions-save" alternativeMarkupIdentifier="inline" /> Save in record</a>
             </div>
         </div>
     </div>
@@ -70,21 +70,21 @@ <h2>Image has been saved</h2>
             <h3>Should we connect the image to a field in this record?</h3>
             <p class="lead">Choose one of the following fields.</p>
             <ul class="t3js-list-of-fields"></ul>
-            <a href="#" class="btn btn-primary js-go-back"><i class="fa fa-arrow-left"></i> go back</a>
+            <a href="#" class="btn btn-primary js-go-back">Back</a>
         </div>
     </div>
     <div class="row" id="savePanelStep2" style="display: none;">
         <div class="col-xs-12">
             <h2>The selected fields contains images</h2>
             <p class="lead">Please choose one option</p>
             <table class="t3js-list-of-relations table table-striped table-hover"><tbody></tbody></table>
-            <a href="#" class="btn btn-primary js-go-back"><i class="fa fa-arrow-left"></i> go back</a>
+            <a href="#" class="btn btn-primary js-go-back">Back</a>
         </div>
     </div>
     <div class="row" id="savePanelStep3" style="display: none;">
         <div class="col-xs-12">
             <h2>Image has been connected</h2>
-            <a href="#" class="btn btn-primary js-go-back"><i class="fa fa-arrow-left"></i> go back</a>
+            <a href="#" class="btn btn-primary js-go-back">Back</a>
         </div>
     </div>
 </div>
diff --git a/Resources/Private/Templates/Post/ListPostsByAuthor.html b/Resources/Private/Templates/Post/ListPostsByAuthor.html
@@ -2,7 +2,12 @@
 <f:section name="Content">
     <f:if condition="{author}">
         <f:then>
-            <h1 class="page-title"><f:translate key="headline.author" arguments="{0: author.name}" /> <blogvh:link.author rss="true" author="{author}"><i class="fa fa-rss-square"></i></blogvh:link.author></h1>
+            <h1 class="page-title">
+                <span><f:translate key="headline.author" arguments="{0: author.name}" /></span>
+                <blogvh:link.author rss="true" author="{author}">
+                    <span class="blogicon"><f:render partial="General/SocialIcons" section="Rss" optional="true" /></span>
+                </blogvh:link.author>
+            </h1>
             <div class="taxonomy-description">
                 <p>{author.bio}</p>
             </div>

diff --git a/Resources/Private/Templates/Post/ListPostsByCategory.html b/Resources/Private/Templates/Post/ListPostsByCategory.html
@@ -2,7 +2,12 @@
 <f:section name="Content">
     <f:if condition="{category}">
         <f:then>
-            <h1 class="page-title"><f:translate key="headline.category" arguments="{0: category.title}" /> <blogvh:link.category rss="true" category="{category}"><i class="fa fa-rss-square"></i></blogvh:link.category></h1>
+            <h1 class="page-title">
+                <span><f:translate key="headline.category" arguments="{0: category.title}" /></span>
+                <blogvh:link.category rss="true" category="{category}">
+                    <span class="blogicon"><f:render partial="General/SocialIcons" section="Rss" optional="true" /></span>
+                </blogvh:link.category>
+            </h1>
             <div class="taxonomy-description">
                 <p>{category.description}</p>
                 <f:if condition="{category.content}">
@@ -12,7 +17,9 @@ <h1 class="page-title"><f:translate key="headline.category" arguments="{0: categ
             <f:render partial="List" arguments="{_all}" />
         </f:then>
         <f:else>
-            <h1 class="page-title"><f:translate key="headline.categories" /></h1>
+            <h1 class="page-title">
+                <span><f:translate key="headline.categories" /></span>
+            </h1>
             <ul class="list-inline">
                 <f:for each="{categories}" as="category">
                     <li><blogvh:link.category category="{category}" /></li>