Skip to content

Commit 0e4e22c

Browse files
shakeebrshakeebr
committed
Adding doc pages
Adding the documentation / landing pages to preview the icons
1 parent 51dbc69 commit 0e4e22c

File tree

11 files changed

+2288
-0
lines changed

11 files changed

+2288
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
.DS_Store

‎Oracle APEX.webloc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>URL</key>
6+
<string>https://apex.oracle.com/en/</string>
7+
</dict>
8+
</plist>

‎docs/about.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" itemscope="itemscope" itemtype="http://schema.org/WebPage" lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
8+
<title>About | Oracle Font APEX</title>
9+
10+
<meta name="title" itemprop="name" content="" />
11+
<meta name="description" itemprop="description" content="" />
12+
<meta name="keywords" content="Oracle, Font, Font Apex, Apex" />
13+
<meta name="version" content="21" />
14+
15+
<meta name="twitter:card" content="summary" />
16+
<meta name="twitter:site" content="oracleapex" />
17+
<meta name="twitter:title" content="" />
18+
<meta name="twitter:description" content="" />
19+
20+
<meta property="og:type" content="article" />
21+
<meta property="og:title" content="" />
22+
<meta property="og:description" content="" />
23+
<meta property="og:site_name" content="Oracle Font APEX" />
24+
25+
<link rel="mask-icon" sizes="all" href="../assets/media/icons/pinned-icon.svg" color="#0572CE" />
26+
<link rel="shortcut icon" type="image/ico" href="../assets/media/icons/favicon.ico" />
27+
<link rel="apple-touch-icon" sizes="192x192" href="../assets/media/icons/icon.png" />
28+
<meta name="theme-color" content="#0572CE" />
29+
30+
<link rel="stylesheet" href="ui.css?v=2.1" type="text/css" />
31+
<link rel="stylesheet" href="../css/font-apex.min.css?v=1.0" type="text/css" />
32+
</head>
33+
<body class="_has-modalOpen" id="top">
34+
35+
<div class="dm-Header">
36+
<div class="dm-Container">
37+
<a class="dm-Header-logoLink" href="index.html">
38+
<svg class="dm-Header-logoIcon" viewBox="0 0 256 32">
39+
<path d="M256 4.812c0 1.969-1.602 3.562-3.594 3.562-1.977 0-3.594-1.595-3.594-3.562 0-1.969 1.617-3.56 3.594-3.56 1.992.002 3.594 1.592 3.594 3.56zm-6.414-.015a2.807 2.807 0 0 0 2.82 2.809c1.561 0 2.836-1.258 2.836-2.809 0-1.535-1.273-2.797-2.836-2.797-1.564 0-2.82 1.262-2.82 2.797zm4.32-.875c0 .047 0 .188-.039.328a1.092 1.092 0 0 1-.5.691l-.18.09.938 1.656h-.914l-.812-1.521h-.555v1.521h-.781V2.699h1c.562 0 .797.008 1.062.109.711.227.781.88.781 1.114zm-1.094-.5c-.189-.066-.375-.066-.75-.066h-.221V4.5h.5c.25-.004.523-.027.682-.25a.593.593 0 0 0 .094-.34.528.528 0 0 0-.305-.488zm-73.921 28.574c-.859 0-1.648-.34-2.242-.934a2.887 2.887 0 0 1-.898-2.099V.312h6.125V26.41H210.5l-3.609 5.586h-28zm46.625-5.586h22.133l-3.617 5.586h-18.945c-8.805 0-15.961-7.094-15.961-15.844 0-8.742 7.156-15.84 15.961-15.84h22.062l-3.617 5.582-18.016-.004c-4.734 0-8.734 3.168-9.953 7.479h29.875l-3.625 5.586h-26.25c1.218 4.299 5.218 7.455 9.953 7.455zm-74.704 0h22.146l-3.617 5.586h-18.938c-8.812 0-15.969-7.094-15.969-15.844 0-8.742 7.156-15.84 15.969-15.84h22.055l-3.617 5.582-18.029-.004c-5.695 0-10.346 4.594-10.346 10.262.003 5.68 4.636 10.258 10.346 10.258zm-52.258 5.586L91.312 32l19.344-30.043C111.476.738 112.898 0 114.429 0c1.531 0 2.922.719 3.75 1.902L137.594 32l-7.25-.004-3.407-5.59h-16.594l-3.625-5.586h16.383L114.46 6.973 98.554 31.996zm-45.116 0V.312h26.875c5.961 0 10.789 4.801 10.789 10.715 0 5.922-4.828 10.699-10.789 10.699H77.5l12.336 10.27h-8.93l-18.32-15.844h17.312c2.852 0 5.164-2.293 5.164-5.125 0-2.828-2.312-5.133-5.164-5.133H59.569v26.102h-6.131zM34.21.312c8.82 0 15.953 7.094 15.953 15.84C50.164 24.902 43.031 32 34.21 32l-18.562-.004C6.844 31.996 0 24.902 0 16.152 0 7.41 6.845.312 15.648.312H34.21zM5.727 16.152c0 5.68 4.625 10.262 10.336 10.262H33.79c5.711 0 10.344-4.582 10.344-10.262 0-5.668-4.633-10.258-10.344-10.258l-17.728-.003c-5.71 0-10.335 4.593-10.335 10.261z" fill="#fff"/>
40+
</svg>
41+
<span class="dm-Header-logoLabel">
42+
Font APEX
43+
</span>
44+
</a>
45+
<ul class="dm-HeaderNav">
46+
<li>
47+
<a class="dm-HeaderNav-link" href="https://github.com/oracle/font-apex">
48+
<svg class="dm-HeaderNav-icon" aria-hidden="true" viewBox="0 0 16 16">
49+
<path d="M8 1.172a7.002 7.002 0 0 0-2.215 13.644c.355.065.483-.154.483-.336 0-.165-.009-.72-.009-1.304 0 0-1.951.419-2.361-.829 0 0-.32-.812-.775-1.022 0 0-.638-.437.046-.428 0 0 .693.054 1.076.72.611 1.075 1.632.765 2.032.583.064-.456.246-.756.446-.939-1.559-.173-3.19-.775-3.19-3.453 0-.767.273-1.395.72-1.878-.073-.183-.31-.894.064-1.86.593-.182 1.933.72 1.933.72a6.626 6.626 0 0 1 3.5 0s1.34-.902 1.923-.72c.383.966.145 1.677.072 1.86a2.69 2.69 0 0 1 .72 1.878c0 2.688-1.64 3.281-3.199 3.453.255.219.474.638.474 1.294v1.924c0 .182.119.401.474.336A7.002 7.002 0 0 0 8 1.172z"/>
50+
</svg>
51+
<span class="dm-HeaderNav-label">View on GitHub</span>
52+
</a>
53+
</li>
54+
<li>
55+
<a class="dm-HeaderNav-link" href="about.html">
56+
<span class="dm-HeaderNav-icon fa fa-info-circle-o" aria-hidden="true"></span>
57+
<span class="dm-HeaderNav-label">About</span>
58+
</a>
59+
</li>
60+
</ul>
61+
</div>
62+
</div>
63+
64+
<div class="dm-Body">
65+
<div class="dm-Container">
66+
67+
<h1>Font APEX</h1>
68+
69+
<div class="dm-About">
70+
71+
<h2>What is Font APEX?</h2>
72+
<p>Font APEX is an icon library designed for <a href="https://apex.oracle.com" target="_blank">Oracle APEX</a> and <a href="https://apex.oracle.com/ut" target="_blank">Universal Theme</a>. It was originally created as a replacement for <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> 4.*, the web's leading icon library, and therefore contains almost all of the Font Awesome icons, re-drawn originally on a 16x16 grid as line-icons. We wanted to make it a seamless switch to go from Font Awesome to Font APEX for Oracle APEX applications, and therefore use the same "fa" prefix for the icons, making it easier than ever to move to entirely new icon library.</p>
73+
74+
<h2>What's new in Font APEX 2?</h2>
75+
<p>Font APEX 2 expands upon the original Font APEX by providing the complete set of Font APEX icons at a larger size. There are now two families of icons in Font APEX: small and large. Small icons are based on a 16x16 grid and ideally suited for buttons and menus. Large icons are based on a 32x32 grid and well suited for places where you need to provide a larger graphic, such as cards, media lists, and hero regions.</p>
76+
<p>Many APEX components will automatically use the large or small icons based on the context (such as Template Options), so all you need to do is focus on the icon you want. For example, when using Cards, the Block and Featured template option will automatically show the larger versions of icons where the Basic and Compact template options will use icons from the smaller set.</p>
77+
<p>There are over a thousand icons and 25 modifiers that can be on top of any existing icons so you can customize any icon to fit your needs.</p>
78+
</div>
79+
80+
</div>
81+
</div>
82+
83+
<div class="dm-Footer">
84+
<div class="dm-Container">
85+
<p>&copy; Oracle</p>
86+
</div>
87+
</div>
88+
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)