Merge 0a57ee6 into bae699f

cfpb · Jun 12, 2019 · c7b82ca · c7b82ca
2 parents bae699f + 0a57ee6
commit c7b82ca
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 135 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -86,6 +86,4 @@ information visit the [Autoprefixer documentation site]
 - JavaScript: Unlike the main consumerfinance.gov project, this project does
   serve interactive scripting to IE 8, but only for the comparison tool, not
   for the header or footer scripting.
-- Icons: We currently use icon fonts to deliver scalable icons. Browsers that
-  do not support icon fonts unfortunately do not receive backups but we try to
-  always pair icons with text.
+
diff --git a/gulp/config.js b/gulp/config.js
@@ -84,10 +84,6 @@ module.exports = {
       ],
       dest: loc.dist
     },
-    icons: {
-      src:  loc.modules + '/capital-framework/src/cf-icons/src/fonts/*',
-      dest: loc.dist + '/static/fonts/'
-    },
     libjs: {
       src: loc.modules + '/sticky-kit/dist/sticky-kit.js',
       dest: 'src/disclosures/js/libs/'

diff --git a/gulp/tasks/copy.js b/gulp/tasks/copy.js
@@ -10,13 +10,6 @@ gulp.task( 'copy:files', function() {
     .pipe( gulp.dest( configCopy.files.dest ) );
 } );
 
-gulp.task( 'copy:icons', function() {
-  return gulp.src( configCopy.icons.src )
-    .pipe( gulpChanged( configCopy.icons.dest ) )
-    .on( 'error', handleErrors )
-    .pipe( gulp.dest( configCopy.icons.dest ) );
-} );
-
 gulp.task( 'copy:libjs', function() {
   return gulp.src( configCopy.libjs.src )
     .pipe( gulpChanged( configCopy.libjs.dest ) )
@@ -34,7 +27,6 @@ gulp.task( 'copy:vendorjs', function() {
 gulp.task( 'copy',
   gulp.parallel(
     'copy:files',
-    'copy:icons',
     'copy:libjs',
     'copy:vendorjs'
   )

diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js
@@ -45,22 +45,14 @@ gulp.task( 'styles:ie', function() {
     .pipe( gulp.dest( configStyles.dest ) );
 } );
 
-gulp.task( 'styles:icon-fonts', function() {
-  const staticPath = 'paying_for_college/static/paying_for_college/disclosures/static/';
-  return gulp.src( './node_modules/cf-icons/src/fonts/*' )
-    .pipe( gulp.dest( staticPath + 'fonts/' ) );
-} );
-
 gulp.task( 'styles:icons', function() {
   const staticPath = 'paying_for_college/static/paying_for_college/disclosures/static/';
   return gulp.src( './node_modules/cf-icons/src/icons/*' )
     .pipe( gulp.dest( staticPath + 'icons/' ) );
 } );
 
-
 gulp.task( 'styles', gulp.parallel(
   'styles:modern',
   'styles:ie',
-  'styles:icon-fonts',
   'styles:icons'
 ) );
diff --git a/paying_for_college/templates/choose_a_loan.html b/paying_for_college/templates/choose_a_loan.html
@@ -185,8 +185,8 @@ <h5 class="guide-sect-header black vspace2 tb border-overlay">what are the optio
     <tbody class="">
         <tr>
             <td class="rh font-m uc ico-repayment no-pad">
-                <div class="icon-positioning-fix">
-                    <div class="icon ico-bullet_check"></div>
+                <div class="icon-positioning-fix ico-bullet_check">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm259 284.2L481.4 870.3c-8.2 14.1-22.7 23.4-39 24.8-1.4.1-2.9.2-4.3.2-14.8 0-28.9-6.6-38.4-18L244.4 690.9c-17.9-21-15.4-52.6 5.7-70.5 21-17.9 52.6-15.4 70.5 5.7.2.3.5.5.7.8l109.4 131.4 241.8-418.8c13.6-24 44.2-32.4 68.2-18.8 24 13.6 32.4 44.2 18.8 68.2l-.5.5z"></path></svg>
                 </div>
                 What you need to know
             </td>
@@ -199,8 +199,8 @@ <h5 class="guide-sect-header black vspace2 tb border-overlay">what are the optio
         </tr>
         <tr>
             <td class="rh font-m uc ico-interest no-pad">
-                <div class="icon-positioning-fix">
-                    <div class="icon ico-bullet_plus"></div>
+                <div class="icon-positioning-fix ico-bullet_plus">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
                 </div>
                 Benefits
             </td>
@@ -213,8 +213,8 @@ <h5 class="guide-sect-header black vspace2 tb border-overlay">what are the optio
         </tr>
         <tr>
             <td class="rh font-m uc ico-eligibility no-pad">
-                <div class="icon-positioning-fix">
-                    <div class="icon ico-bullet_minus"></div>
+                <div class="icon-positioning-fix ico-bullet_minus">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
                 </div>
                 Risks
             </td>

diff --git a/paying_for_college/templates/landing.html b/paying_for_college/templates/landing.html
@@ -56,16 +56,20 @@ <h2>Welcome!</h2>
             <header class="border-overlay-spacing">
                 <h2 class="h4 border-overlay">Student financial guides</h2>
             </header>
-            <div class="col col8">
+            <div class="col col8 u-mb30">
                 <p>For many people, how to pay for a college education is one of the first major financial decisions they'll make. These guides cover some of the big decisions you’ll face and will help you understand your options for financing your college education.</p>
             </div>
             <div class="clearfix">
                 <div class="col col6">
                     <h3>Student loans</h3>
                     <p>If you’re considering student loans to help you pay for school, you’re not alone – many students need loans to cover their full cost of attendance. If you have to take out student loans, comparing your options can help you find the student loan best suited for your needs. <a href="/{{url_root}}/choose-a-student-loan/">More about student loans</a>.</p>
 
-                    <p>Still need to apply for financial aid? <br><a href="https://fafsa.gov/" target="_blank" rel="noopener noreferrer">Visit fafsa.gov&nbsp;<i class="icon-external-link"></i></a>
-                </p>
+                    <p>
+                        Still need to apply for financial aid? <br>
+                        <a href="https://fafsa.gov/" target="_blank" rel="noopener noreferrer">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790.1 1200" class="cf-icon-svg"><path d="M740.1 178.8H449.5c-27.6 0-50 22.4-50 50s22.4 50 50 50h169.9L518.2 379.9c-14.7-6.2-30.5-9.4-46.4-9.4H120c-66.2.1-119.9 53.8-120 120v351.8c.1 66.2 53.8 119.9 120 120h351.8c66.2-.1 119.9-53.8 120-120V490.6c0-12.6-2-25-5.8-37l104.1-104.1v169.9c0 27.6 22.4 50 50 50s50-22.4 50-50V228.8c0-27.7-22.4-50-50-50zM491.8 842.3c-.1 11-9 19.9-20 20H120c-11-.1-19.9-9-20-20V490.6c.1-11 9-19.9 20-20h307.5L267 631.1c-19.4 19.6-19.3 51.3.3 70.7 19.5 19.3 50.9 19.3 70.4 0l154-154 .1 294.5z"></path></svg>
+                        </a>
+                    </p>
                 </div>
                 <div class="col last col6">
                     <h3>Student banking</h3>
@@ -79,9 +83,14 @@ <h3>Student banking</h3>
                 <h2 class="h4 border-overlay">Compare financial aid offers</h2>
             </header>
             <div class="col last col8">
-                <p>As part of our <a href="http://www.consumerfinance.gov/students/knowbeforeyouowe/">Know Before You Owe project</a>, we worked with the Department of Education to create a <a class="pdf exit-link" href="http://collegecost.ed.gov/shopping_sheet.pdf">Financial Aid Shopping Sheet</a>. Now that thousands of colleges are adopting this clear and comparable form, we’ve built a tool that complements the shopping sheet to help students make comparisons tailored to their individual circumstances.</p>
+                <p>As part of our <a href="http://www.consumerfinance.gov/students/knowbeforeyouowe/">Know Before You Owe project</a>, we worked with the Department of Education to create a <a class="exit-link" href="http://collegecost.ed.gov/shopping_sheet.pdf">Financial Aid Shopping Sheet</a>. Now that thousands of colleges are adopting this clear and comparable form, we’ve built a tool that complements the shopping sheet to help students make comparisons tailored to their individual circumstances.</p>
                 <p><a class="button" href="/{{url_root}}/compare-financial-aid-and-college-cost/">Compare costs</a></p>
-                <p>Still researching schools? <br><a class="exit-link" href="http://collegecost.ed.gov/scorecard/index.aspx" target="_blank" rel="noopener noreferrer">Check out College Scorecard&nbsp;<i class="icon-external-link"></i></a>
+                <p>
+                    Still researching schools? <br>
+                    <a class="exit-link" href="http://collegecost.ed.gov/scorecard/index.aspx" target="_blank" rel="noopener noreferrer">
+                        Check out College Scorecard
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790.1 1200" class="cf-icon-svg"><path d="M740.1 178.8H449.5c-27.6 0-50 22.4-50 50s22.4 50 50 50h169.9L518.2 379.9c-14.7-6.2-30.5-9.4-46.4-9.4H120c-66.2.1-119.9 53.8-120 120v351.8c.1 66.2 53.8 119.9 120 120h351.8c66.2-.1 119.9-53.8 120-120V490.6c0-12.6-2-25-5.8-37l104.1-104.1v169.9c0 27.6 22.4 50 50 50s50-22.4 50-50V228.8c0-27.7-22.4-50-50-50zM491.8 842.3c-.1 11-9 19.9-20 20H120c-11-.1-19.9-9-20-20V490.6c.1-11 9-19.9 20-20h307.5L267 631.1c-19.4 19.6-19.3 51.3.3 70.7 19.5 19.3 50.9 19.3 70.4 0l154-154 .1 294.5z"></path></svg>
+                    </a>
                 </p>
             </div>
         </section>