FontAwesome 5 added to admin area and bootstrap3 theme. $tp->toIcon() supports SVG sizing 2x, 3x etc.

e107_admin/image.php

@@ -923,11 +923,12 @@ class media_admin_ui extends e_admin_ui
 	protected $cats = array();
 	protected $owner = array();
 	protected $ownercats = array();
+	protected $fontawesome; // frontend loaded version from theme.xml.
 
 
 	function init()
 	{
-
+		$this->fontawesome = (int) e107::getTheme()->getFontAwesome(); 
 
 		$this->prefs['youtube_apikey']['writeParms']['post'] = " <a target='_blank' href='https://code.google.com/apis/console/'>".LAN_MORE. '</a>';
 
@@ -948,6 +949,7 @@ class media_admin_ui extends e_admin_ui
 		//	$ownerLabel = (substr($owner,0,1) == '_') ? '' : $owner.": ";
 			$this->cats[$cat] = $row['media_cat_title'];
 		}
+
 		asort($this->cats);
 		
 		
@@ -2067,44 +2069,89 @@ class media_admin_ui extends e_admin_ui
 		
 		);
 
+
+
+		// --------------------------
+
 		$items = array();
-
-		$bs2 = e107::getMedia()->getGlyphs('bs3','glyphicon-');
-
 		$md = e107::getMedia();
-		
+
-		foreach($bs2 as $val)
+
+		if($this->fontawesome === 5)
 		{
-			$items[] = array(
+		//	e107::getParser()->setFontAwesome(5);
-					'previewHtml'   => $md->previewTag($val, array('type'=>'glyph')),
+			$fab = e107::getMedia()->getGlyphs('fab');
-					'previewUrl'	=> 'glyphicon '.$val,
-					'saveValue'		=> $val.'.glyph',
-					'thumbUrl'		=> $val,
-					'title'			=> $val,
-					'slideCaption'	=> 'Bootstrap',
-					'slideCategory'	=> 'bootstrap'
-			); 		
-				
-		}
 
-		
+			foreach($fab as $val)
-		$fa4 = e107::getMedia()->getGlyphs('fa4');
+			{
+				$items[] = array(
+						'previewHtml'   => $md->previewTag('fab-'.$val,array('type'=>'glyph')),
+						'previewUrl'	=> 'fab fa-'.$val,
+						'saveValue'		=> 'fab-'.$val.'.glyph',
+						'thumbUrl'		=> 'fab-'.$val,
+						'title'			=> 'FA5 fa-'.$val,
+						'slideCaption'	=> 'Font-Awesome 5 (brand)',
+						'slideCategory'	=> 'font-awesome'
+				);
 
+			}
 
-		foreach($fa4 as $val)
+			$fas = e107::getMedia()->getGlyphs('fas');
-		{
+
-			$items[] = array(
+			foreach($fas as $val)
-					'previewHtml'   => $md->previewTag('fa-'.$val,array('type'=>'glyph')),
+			{
-					'previewUrl'	=> 'fa fa-'.$val,
+				$items[] = array(
-					'saveValue'		=> 'fa-'.$val.'.glyph',
+						'previewHtml'   => $md->previewTag('fas-'.$val, array('type'=>'glyph')),
-					'thumbUrl'		=> 'fa-'.$val,
+						'previewUrl'	=> 'fas fa-'.$val,
-					'title'			=> $val,
+						'saveValue'		=> 'fas-'.$val.'.glyph',
-					'slideCaption'	=> 'Font-Awesome 4',
+						'thumbUrl'		=> 'fas-'.$val,
-					'slideCategory'	=> 'font-awesome'
+						'title'			=> 'FA5 fa-'.$val,
-			); 		
+						'slideCaption'	=> 'Font-Awesome 5 (free)',
+						'slideCategory'	=> 'font-awesome'
+				);
+
+			}
 
 		}
+		else
+		{
 
+			$fa4 = e107::getMedia()->getGlyphs('fa4');
+
+			foreach($fa4 as $val)
+			{
+				$items[] = array(
+						'previewHtml'   => $md->previewTag('fa-'.$val,array('type'=>'glyph')),
+						'previewUrl'	=> 'fa fa-'.$val,
+						'saveValue'		=> 'fa-'.$val.'.glyph',
+						'thumbUrl'		=> 'fa-'.$val,
+						'title'			=> 'FA4 '.$val,
+						'slideCaption'	=> 'Font-Awesome 4',
+						'slideCategory'	=> 'font-awesome'
+				);
+
+			}
+		}
+
+		if($this->fontawesome === false || ($this->fontawesome < 4))
+		{
+
+			$bs3 = e107::getMedia()->getGlyphs('bs3','glyphicon-');
+
+			foreach($bs3 as $val)
+			{
+				$items[] = array(
+						'previewHtml'   => $md->previewTag($val, array('type'=>'glyph')),
+						'previewUrl'	=> 'glyphicon '.$val,
+						'saveValue'		=> $val.'.glyph',
+						'thumbUrl'		=> $val,
+						'title'			=> 'BS3 '.$val,
+						'slideCaption'	=> 'Bootstrap',
+						'slideCategory'	=> 'bootstrap'
+				);
+			}
+
+		}
 
 
 		$custom = e107::getThemeGlyphs();
@@ -2115,7 +2162,7 @@ class media_admin_ui extends e_admin_ui
 			{
 
 
-				$tmp = e107::getMedia()->getGlyphs($glyphConfig,$glyphConfig['prefix']);
+				$tmp = e107::getMedia()->getGlyphs($glyphConfig, $glyphConfig['prefix']);
 
 				if(!empty($tmp))
 				{

e107_admin/includes/infopanel.php

@@ -547,8 +547,8 @@ class adminstyle_infopanel
 			<li id='comment-".$row['comment_id']."' class='media".$hide."'>
 				<span class='media-object pull-left'>{USER_AVATAR=".$row['comment_author_id']."}</span> 
 				<div class='btn-group pull-right'>
-	            	<button data-target='".e_BASE."comment.php' data-comment-id='".$row['comment_id']."' data-comment-action='delete' class='btn btn-sm btn-mini btn-danger'><i class='icon-remove'></i> ".LAN_DELETE."</button>
+	            	<button data-target='".e_BASE."comment.php' data-comment-id='".$row['comment_id']."' data-comment-action='delete' class='btn btn-sm btn-mini btn-danger'><i class='fa fa-remove'></i> ".LAN_DELETE."</button>
-	            	<button data-target='".e_BASE."comment.php' data-comment-id='".$row['comment_id']."' data-comment-action='approve' class='btn btn-sm btn-mini btn-success'><i class='icon-ok'></i> ".LAN_APPROVE."</button>
+	            	<button data-target='".e_BASE."comment.php' data-comment-id='".$row['comment_id']."' data-comment-action='approve' class='btn btn-sm btn-mini btn-success'><i class='fa fa-check'></i> ".LAN_APPROVE."</button>
 	            </div>
 				<div class='media-body'>
 					<small class='muted smalltext'>".$tp->lanVars(LAN_POSTED_BY_X, $lanVar)."</small><br />

e107_admin/theme.php

@@ -926,7 +926,7 @@ class theme_admin_form_ui extends e_admin_form_ui
 			return '';
 		}
 
-		$text =(!empty($curVal)) ? "<span class='label label-primary'><i class='icon-shopping-cart icon-white'></i> ".$curVal."</span>" : "<span class='label label-success'>".TPVLAN_76."</span>";
+		$text =(!empty($curVal)) ? "<span class='label label-primary'><i class='fa fa-shopping-cart icon-white'></i> ".$curVal."</span>" : "<span class='label label-success'>".TPVLAN_76."</span>";
 
 		return '<span class="price pull-right">'.$text.'</span>';
 	}

e107_handlers/e_parse_class.php

@@ -3655,35 +3655,8 @@ class e_parse
 		$size = null;
 		$tag = 'i';
 
-		//	return print_r($fa4,true);
+		// FontAwesome General settings.
-		/*
+		if(strpos($text, 'fa-') === 0 || strpos($text, 'fab-') === 0 ||  strpos($text, 'fas-') === 0)
-				if(deftrue('FONTAWESOME') &&  in_array($id ,$fa4)) // Contains FontAwesome 3 set also.
-				{
-					$prefix = 'fa fa-';
-					$size 	= (vartrue($parm['size'])) ?  ' fa-'.$parm['size'] : '';
-					$tag 	= 'i';
-					$spin   = !empty($parm['spin']) ? ' fa-spin' : '';
-					$rotate = !empty($parm['rotate']) ? ' fa-rotate-'.intval($parm['rotate']) : '';
-					$fixedW = !empty($parm['fw']) ? ' fa-fw' : "";
-				}
-				elseif(deftrue("BOOTSTRAP"))
-				{
-					if(BOOTSTRAP === 3 && in_array($id ,$bs3))
-					{
-						$prefix = 'glyphicon glyphicon-';
-						$tag = 'span';
-					}
-					else
-					{
-				//		$prefix = 'icon-';
-						$tag = 'i';
-					}
-
-					$size = '';
-
-				}
-				*/
-		if(strpos($text, 'fa-') === 0) // Font-Awesome 4 & 5
 		{
 			$prefix = 'fa ';
 			$size = (vartrue($parm['size'])) ? ' fa-' . $parm['size'] : '';
@@ -3691,23 +3664,37 @@ class e_parse
 			$spin = !empty($parm['spin']) ? ' fa-spin' : '';
 			$rotate = !empty($parm['rotate']) ? ' fa-rotate-' . (int) $parm['rotate'] : '';
 			$fixedW = !empty($parm['fw']) ? ' fa-fw' : '';
+		}
 
-			if($this->fontawesome === 5)
+
+		if(strpos($text, 'fab-') === 0)
+		{
+			$prefix = 'fab ';
+			$id = str_replace('fab-', 'fa-', $id);
+		}
+		elseif(strpos($text, 'fas-') === 0)
+		{
+			$prefix = 'fas ';
+			$id = str_replace('fas-', 'fa-', $id);
+		}
+		elseif($this->fontawesome === 5)
+		{
+			$fab = e107::getMedia()->getGlyphs('fab');
+			$fas = e107::getMedia()->getGlyphs('fas');
+
+			$code = substr($id, 3);
+
+			if(in_array($code, $fab))
 			{
-				$fab = e107::getMedia()->getGlyphs('fab');
+				$prefix = 'fab ';
-				$fas = e107::getMedia()->getGlyphs('fas');
+			}
-
+			elseif(in_array($code, $fas))
-				$code = substr($id, 3);
+			{
-
+				$prefix = 'fas ';
-				if(in_array($code, $fab))
+			}
-				{
+			else
-					$prefix = 'fab ';
+			{
-				}
+				trigger_error($code. " not found.");
-				elseif(in_array($code, $fas))
-				{
-					$prefix = 'fas ';
-				}
-
 			}
 
 		}
@@ -4058,6 +4045,15 @@ class e_parse
 		$alt = (!empty($parm['alt'])) ? $this->toAttribute($parm['alt']) : basename($path);
 		$class = (!empty($parm['class'])) ? $parm['class'] : 'icon';
 
+		if($ext === 'svg')
+		{
+			$class .= ' icon-svg fa-2x';
+			if(!empty($parm['size']))
+			{
+				$class .= ' icon-svg-'.$parm['size'];
+			}
+		}
+
 		return "<img class='" . $class . "' src='" . $path . "' alt='" . $alt . "' " . $dimensions . ' />';
 	}
 

e107_handlers/theme_handler.php

@@ -189,7 +189,7 @@ class e_theme
 			}
 
 			// If no scope set, we load library on both areas.
-			if(empty($library['scope']) || $library['scope'] === 'all')
+			if(empty($library['scope']) || $library['scope'] === 'all' || (deftrue('e_ADMIN_AREA') && $library['scope'] === 'admin'))
 			{
 				if($library['name'] === 'bootstrap' && !empty($library['version']))
 				{
@@ -383,6 +383,24 @@ class e_theme
 		return isset($this->_data[$this->_current][$var]) ? $this->_data[$this->_current][$var] : false;
 	}
 
+	/**
+	 * Returns the fontawesome version of the currently loaded theme.
+	 * @return integer|false
+	 */
+	public function getFontAwesome()
+	{
+		$lib = $this->get('library');
+		foreach($lib as $var)
+		{
+			if($var['name'] === 'fontawesome' && !empty($var['version']) )
+			{
+				return (int) $var['version'];
+			}
+		}
+
+		return false;
+	}
+
 	/**
 	 * Rebuild URL without trackers, for matching against theme_layout prefs.
 	 * @param string $url
@@ -1930,7 +1948,7 @@ class themeHandler
 //		$preview 		= "<a href='".SITEURL."news.php?themepreview.".$theme['id']."' title='".TPVLAN_9."' >".($theme['preview'] ? "<img src='".$theme['preview']."' style='border: 1px solid #000;width:200px' alt='' />" : "<img src='".e_IMAGE_ABS."admin_images/nopreview.png' title='".TPVLAN_12."' alt='' />")."</a>";
 		$description 	= vartrue($theme['description']);
 		$compat			= (version_compare(1.9,$theme['compatibility'],'<')) ? "<span class='label label-".$compatLabelType."'>".$theme['compatibility']."</span><span class='text-".$compatLabelType."'> ".$compatLabel."</span>": vartrue($theme['compatibility'],'1.0');
-		$price 			= (!empty($theme['price'])) ? "<span class='label label-primary'><i class='icon-shopping-cart icon-white'></i> ".$theme['price']."</span>" : "<span class='label label-success'>".TPVLAN_76."</span>";
+		$price 			= (!empty($theme['price'])) ? "<span class='label label-primary'><i class='fa fa-shopping-cart icon-white'></i> ".$theme['price']."</span>" : "<span class='label label-success'>".TPVLAN_76."</span>";
 
 		$text = e107::getForm()->open('theme-info','post');
 		$text .= "<table class='table table-striped'>";

e107_handlers/userclass_class.php

@@ -1416,7 +1416,7 @@ class user_class_admin extends user_class
 		$pref = e107::getPref();
 	
 		$style = ($pref['admincss'] == 'admin_dark.css') ? ' icon-white' : '';
-		$this->top_icon = "<i class='icon-user{$style}'></i> ";
+		$this->top_icon = "<i class='fa fa-user{$style}'></i> ";
 	}
 
 

e107_plugins/online/online_menu.php

@@ -143,7 +143,7 @@ $caption = $img.' '.vartrue($menu_pref['online_caption'], LAN_ONLINE_4);
 if (getperms('1')) 
 {
 	$path = e_PLUGIN_ABS."online/config.php?iframe=1";
-	$caption .= "<a class='e-modal pull-right float-right' data-modal-caption='".LAN_SETTINGS."' href='".$path."' title='".LAN_SETTINGS."'><i class='glyphicon glyphicon-cog'></i></a>";
+	$caption .= "<a class='e-modal pull-right float-right' data-modal-caption='".LAN_SETTINGS."' href='".$path."' title='".LAN_SETTINGS."'><i class='fa fa-cog'></i></a>";
 }
 
 

e107_tests/tests/unit/e_parseTest.php

@@ -1950,6 +1950,7 @@ while($row = $sql->fetch())
 
 		public function testToGlyph()
 		{
+			$this->tp->setFontAwesome(4);
 
 			$result = $this->tp->toGlyph('fa-envelope.glyph');
 			$expected = "<i class='fa fa-envelope' ><!-- --></i> ";
@@ -1962,6 +1963,24 @@ while(&#036;row = &#036;sql-&gt;fetch())
 			$this->assertEquals($expected, $result);
 
 
+			$this->tp->setFontAwesome(4);
+
+			$result = $this->tp->toGlyph('fab-mailchimp'); // spefific call
+			$expected = "<i class='fab fa-mailchimp' ><!-- --></i> ";
+			$this->assertEquals($expected, $result);
+
+			$result = $this->tp->toGlyph('fas-camera'); // spefific call
+			$this->assertSame( "<i class='fas fa-camera' ><!-- --></i> ", $result);
+
+
+
+		}
+
+		function testToGlyphFallback()
+		{
+			$this->tp->setFontAwesome(5);
+			$result =  $this->tp->toGlyph('fa-paypal.glyph');
+			$this->assertSame("<i class='fab fa-paypal' ><!-- --></i> ", $result);
 		}
 /*
 		public function testToBadge()

e107_themes/bootstrap3/admin_style.css

@@ -1890,7 +1890,7 @@ tr.highlight-even, .table-striped > tbody > tr.highlight-even		{ background-colo
 .admin-left-panel-collapsed .admin-menu .panel-heading { border-top-right-radius: 10px;
 border-bottom-right-radius: 10px; }
 
-
+.adminlist img.icon { max-width: 64px }
 
 
 @media (min-width: 1101px ){

e107_themes/bootstrap3/theme.xml

@@ -20,7 +20,7 @@
 	</screenshots>
 	<libraries>
 		<library name="bootstrap" version="3" scope="all"/>
-		<library name="fontawesome" version="4"  scope="all"/>
+		<library name="fontawesome" version="5"  scope="all"/>
 		<library name="bootstrap.editable" scope="admin"/>
 	</libraries>
 	<stylesheets>

e107_web/css/e107.css

@@ -35,6 +35,13 @@ td.text-center	{ text-align:center; }
 .S64 			{ width: 64px; height: 64px }
 .S128 			{ width: 128px; height: 128px }
 
+.icon-svg       { width: 1em; }
+.icon-svg-2x    { width: 2em; }
+.icon-svg-3x    { width: 3em; }
+.icon-svg-4x    { width: 4em; }
+.icon-svg-5x    { width: 5em; }
+
+
 /* Decorate JS - see core/decorate.js */
 .odd 			{  }
 .even 			{ background-color: #F5F5F5 }