Is it possible to link Social media icons inside WordPress post without text?
I have used below code in WordPress Visual composer text module:
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
After updating the post, the links changed as:
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
Can you try with Raw HTML module in the visual composer?
Ideally you'd want to create a shortcode and insert it using VC
Create the shortcode like this:
function social_media_shortcode( $atts, $content ) {
$a = shortcode_atts( array(
), $atts );
ob_start();
?>
<div class="vc-social-media">
social items go here
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'social-media', 'social_media_shortcode' );
Then register the shortcode in VC like this:
add_action( 'vc_before_init', 'socialMediaVC' );
function socialMediaVC() {
vc_map( array(
"name" => "My Social Media Shortcode",
"base" => "vc-social-media",
"class" => "vc-social-media",
"category" => "Content",
"params" => array(
)
));
}
Now you'll have your own Visual Composer object that you can add.
Also, are you using VC for Posts or for Pages?
Related
I am trying to display an icon in a column instead of its text via CSS. However, I have been unable to find right syntax for this piece of code.
My reactjs code has:
return '<div><span class="fa fa-2x fa-star" style="display : [' + item.Status + ' == approved] ? block: none"></span></div>';
}
That results in below code which doesn't work:
<div>
<span class="fa fa-2x fa-star" style="display : [submitted == approved] ? block: none"></span>
</div>
In the above situation when "submitted" != "approved", it ideally shouldn't show the icon but the star icon show up in each row (whether value matches or not).
In chrome, I've also tried below codes and many similar formats but none of them work:
<span class="fa fa-2x fa-star" style="[rejected == approved] ? display: block : display : none"></span>
<span class="fa fa-2x fa-star" style="display : [rejected == approved] ? block : none"></span>
<span class="fa fa-2x fa-star" style="display : "rejected" == "approved" ? block : none"></span>
My requirement is that icon should be visible only when value LHS and RHS value matches, eg: "approved" = "approved".
The solution that worked for me is:
var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.
return '<div><span class=" '+ cssClass + '" </span></div>';
}
You try this:
displayStyle = submitted == approved ? 'block': 'none';
return (
<div>
<span class="fa fa-2x fa-star" style={{ display: displayStyle }}></span>
</div>
)
Code that worked for me:
var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.
return '<div><span class=" '+ cssClass + '" </span></div>';
}
I'm trying to call different HTML pages through href in tag after running flask file .But it's giving
Not found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again. where am i going wrong.
` index.html
<section>
<nav>
<ul>
<li><a href="index.html" class="button js-button" role="button">
<i class="fa fa-file" aria-hidden="true"></i> File </a></li>
<br><br>
<li><i class="fa fa-file-image-o" aria-hidden="true"></i> Image</li>
<br><br>
<li><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Text </li>
</ul>
</nav>
`
app.py
app = Flask(__name__)
app.secret_key = 'random string'
#app.config['UPLOAD_FOLDER'] = 'templates/'
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
#app.route('/')
def home():
return render_template('index.html')
Try this:
<a href="{{ url_for('index.html') }}" class="button js-button" role="button">
More about templating can be found here: http://flask.pocoo.org/docs/1.0/templating/
I've found some code examples that explain how I can apply a class item if conditions are met.
In my .ts file I have the following:
private readNews : boolean = false;
[..]
ngOnInit() {
localStorage.setItem('readNews', 'Read');
if (localStorage.getItem('readNews') != null || '') {
this.readNews = true;
}
}
In my HTML I have the following inline CSS:
<i class="fal fa-cogs fa-5x"></i>
However, what I want it to be is the following:
If this.readNews === true
<i class="fal fa-cogs fa-5x blink"></i>
So it needs to add 'blink' in the CSS when the news is read (which is saved in localStorage).
try like this :
<i [ngClass]="readNews ? 'fal fa-cogs fa-5x blink': 'fal fa-cogs fa-5x'"></i>
Use ngClass
<i [ngClass]="(readNews == 'Read')? 'fal fa-cogs fa-5x blink':'fal fa-cogs fa-5x'" ></i>
or you can call custom functions
[ngClass]="getClass()"
getClass(flag:string) {
let cssClasses;
if(localStorage.getItem('readNews') == 'Read') {
cssClasses = {
'fal': true,
'fa-cogs': true,
'fa-5x': true,
'blink': true
}
} else {
cssClasses = {
'fal': true,
'fa-cogs': true,
'fa-5x': true,
'blink': false
}
}
return cssClasses;
}
<i [class.blink]="readNews"></i>
Based on cheat sheet on https://angular.io/guide/cheatsheet
In HTML:
<i *ngIf="readNews" class="fal fa-cogs fa-5x"></i>
<i *ngIf="!readNews" class="fal fa-cogs fa-5x blink"></i>
And in typescript i would refactor as this to improve readability:
ngOnInit() {
localStorage.setItem('readNews', 'Read');
this.readNews = (localStorage.getItem('readNews') != null || '');
}
Having problem showing the right in-stock (store) or (online) message when checking stock amount in my json.
So the scenario is if the stocks are less than 10 its considered as low-stock if its greater than 10 then in-stock if its 0 then out-of-stock.
My problem is when the stock is less than 10 my *ngIf sees value 0 as well so it shows low-stock as well as out-of-stock, or if stock 10 it shows low-stock and in-stock. But if the stock is greater than 10 its fine.
How can I properly check the stocks to show the right stock message?
Sample json --
this.checkStock = {
"online": 0,
"store": 10
}
Template with ngIf checks--
<p>
<span *ngIf="checkStock.online >= 10 "><i class="fa fa-check-circle fa-2x text-success" aria-hidden="true"></i> In-stock (Online)</span>
<span *ngIf="checkStock.online <= 10 "><i class="fa fa-exclamation-circle fa-2x text-warning" aria-hidden="true"></i> Low stock (Online)</span>
<span *ngIf="checkStock.online == 0"><i class="fa fa-times-circle fa-2x text-danger" aria-hidden="true"></i> Out-of-stock (Online)</span>
</p>
<p>
<span *ngIf="checkStock.store >= 10 "><i class="fa fa-check-circle fa-2x text-success" aria-hidden="true"></i> In-stock (store)</span>
<span *ngIf="checkStock.store <= 10 "><i class="fa fa-exclamation-circle fa-2x text-warning" aria-hidden="true"></i> Low stock (store)</span>
<span *ngIf="checkStock.store == 0"><i class="fa fa-times-circle fa-2x text-danger" aria-hidden="true"></i> Out-of-stock (store)</span>
</p>
Plnkr sample
Just add condition not to match 0:
<span *ngIf="checkStock.online >= 10 "><i class="fa fa-check-circle fa-2x text-success" aria-hidden="true"></i> In-stock (Online)</span>
<span *ngIf="checkStock.online <= 10 && checkStock.online > 0"><i class="fa fa-exclamation-circle fa-2x text-warning" aria-hidden="true"></i> Low stock (Online)</span>
<span *ngIf="checkStock.online == 0"><i class="fa fa-times-circle fa-2x text-danger" aria-hidden="true"></i> Out-of-stock (Online)</span>
Add && checkStock.online != 0 to check if stock is less than 10 and not equal to 0
I prefer to create booleans and use them:
export class App {
name:string;
checkStock: any;
outOfStock: boolean = false;
lowStock: boolean = false;
inStock: boolean = false;
constructor() {
this.name = `Angular! v${VERSION.full}`
this.checkStock = {
"online": 0,
"store": 10
}
this.outOfStock = this.checkStock.online == 0;
this.lowStock = this.checkStock.online <= 10;
this.inStock = this.checkStock.online >= 10;
}
}
In template:
<p>
<span *ngIf="inStock"><i class="fa fa-check-circle fa-2x text-success" aria-hidden="true"></i> In-stock (Online)</span>
<span *ngIf="lowStock"><i class="fa fa-exclamation-circle fa-2x text-warning" aria-hidden="true"></i> Low stock (Online)</span>
<span *ngIf="outOfStock"><i class="fa fa-times-circle fa-2x text-danger" aria-hidden="true"></i> Out-of-stock (Online)</span>
</p>
The reasoning why I prefer to create the booleans in my component's logic and avoid logic in my template is because maybe in the future the logic for the ngIf will be more complex than comparing to 10, for example.
The following will display it as text (with<\i class.. backslash and without ) and not as HTML, probably very simple, but I can't find it :(
<div *ngFor="let facility of facilities;">
{{facility['freewifi'] || facility['paidwifi'] ? '<\i class="fa fa-wifi fa-fw" aria-hidden="true"><\/i> :' : '' }}
</div>
Answer:
<i *ngIf="facility['freewifi'] || facility['paidwifi']" class="fa fa-wifi fa-fw" aria-hidden="true"></i>
Use *ngIf instead:
<i *ngIf="facility['freewifi'] || facility['paidwifi']" class="fa fa-wifi fa-fw" aria-hidden="true"></i>