#4 glyphs

pom.xml

@@ -70,6 +70,33 @@
             </plugins>
         </pluginManagement>
         <plugins>
+            <plugin>
+                <groupId>org.codehaus.mojo</groupId>
+                <artifactId>exec-maven-plugin</artifactId>
+                <version>1.3</version>
+                <executions>
+                    <execution>
+                        <id>fontcustom</id>
+                        <phase>generate-resources</phase>
+                        <goals>
+                            <goal>exec</goal>
+                        </goals>
+                        <configuration>
+                            <executable>fontcustom</executable>
+                            <workingDirectory>${project.build.directory}</workingDirectory>
+                            <arguments>
+                                <argument>compile</argument>
+                                <argument>--output=${project.build.outputDirectory}/ico</argument>
+                                <argument>--no_hash=true</argument>
+                                <argument>--font_name=ico</argument>
+                                <argument>--templates=css</argument>
+                                <argument>--autowidth=true</argument>
+                                <argument>${basedir}/src/main/glyphs</argument>
+                            </arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
             <plugin>
                 <groupId>org.jasig.maven</groupId>
                 <artifactId>sass-maven-plugin</artifactId>

src/main/resources/META-INF/maven/site.vm

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>${title}</title>
         <link media="all" rel="stylesheet" type="text/css" href="${relativePath}/css/jcabi.css"/>
+        <link media="all" rel="stylesheet" type="text/css" href="${relativePath}/ico/ico.css"/>
         #foreach ($author in $authors)
             <meta name="author" content="${author}" />
         #end
@@ -125,21 +126,37 @@
                             </ul>
                             <div class="social">
                                 <a href="http://www.facebook.com/sharer/sharer.php?u=URL"
-                                    title="Share on Facebook" class="ico">&#x43;</a>
+                                    title="Share on Facebook" class="ico">
+                                    <i class="icon-facebook"></i>
+                                </a>
                                 <a href="https://twitter.com/share?url=URL&amp;text=TITLE"
-                                    title="Share on Twitter" class="ico">&#x42;</a>
+                                    title="Share on Twitter" class="ico">
+                                    <i class="icon-twitter"></i>
+                                </a>
                                 <a href="https://plus.google.com/share?url=URL"
-                                    title="Share on Google+" class="ico">&#x46;</a>
+                                    title="Share on Google+" class="ico">
+                                    <i class="icon-googleplus"></i>
+                                </a>
                                 <a href="https://www.linkedin.com/cws/share?url=URL"
-                                    title="Share on LinkedIn" class="ico">&#x45;</a>
+                                    title="Share on LinkedIn" class="ico">
+                                    <i class="icon-linkedin"></i>
+                                </a>
                                 <a href="http://www.stumbleupon.com/submit?url=URL&amp;title=TITLE"
-                                    title="Share on StumbleUpon" class="ico">&#x40;</a>
+                                    title="Share on StumbleUpon" class="ico">
+                                    <i class="icon-stumbleupon"></i>
+                                </a>
                                 <a href="http://digg.com/submit?phase=2&amp;url=URL&amp;title=TITLE"
-                                    title="Share on Digg" class="ico">&#x44;</a>
+                                    title="Share on Digg" class="ico">
+                                    <i class="icon-digg"></i>
+                                </a>
                                 <a href="http://reddit.com/submit?url=URL&amp;title=TITLE"
-                                    title="Share on Reddit" class="ico">&#x41;</a>
+                                    title="Share on Reddit" class="ico">
+                                    <i class="icon-reddit"></i>
+                                </a>
                                 <a href="http://news.ycombinator.com/submitlink?u=URL&amp;t=TITLE"
-                                    title="Share on Hacker News" class="ico">&#x49;</a>
+                                    title="Share on Hacker News" class="ico">
+                                    <i class="icon-hackernews"></i>
+                                </a>
                             </div>
                         </header>
                         <div id="here-goes-menu" class="menu-off"></div>

src/main/scss/jcabi.scss

@@ -246,9 +246,9 @@ table {
     border-radius: 50%;
     border: 1px solid $gray;
     color: $gray;
-    width: 1.5 * $em;
+    width: 1.3 * $em;
     text-align: center;
-    font-size: 1.5 * $em;
+    font-size: 1.3 * $em;
     padding: .5 * $em;
     background-color: inherit;
     &:hover {