Improve page icon styling

splitbee · Sep 21, 2020 · 611a373 · 611a373
1 parent 5e99022
commit 611a373
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/page-icon.tsx b/src/components/page-icon.tsx
@@ -51,6 +51,7 @@ const PageIcon: React.FC<AssetProps> = ({
       <span
         className={classNames(
           className,
+          "notion-emoji",
           big ? "notion-page-icon-cover" : "notion-page-icon"
         )}
         role="img"

diff --git a/src/styles.css b/src/styles.css
@@ -180,6 +180,10 @@
   font-size: 1.25em;
   margin-top: 1em;
 }
+.notion-emoji {
+  font-family: "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji",
+    "Segoe UI Symbol";
+}
 .notion-page-cover {
   display: block;
   object-fit: cover;
@@ -279,7 +283,7 @@ img.notion-page-icon-offset {
 .notion-page-icon {
   font-size: 1.1em;
   margin-right: 4px;
-  margin-top: 2px;
+  margin-top: 1px;
   margin-left: 2px;
 }
 img.notion-page-icon {