Issue #1308Opened July 23, 2018by manishkumaruit0 reactions
I am not able to insert icon and its class in html element
Question
Code SnippetTEXT
bm.add('test-block', {
label: "Icons",
category: "Prismanote Blocks",
content: {
script: function () {
var d = window.parent.window.modalJ;
d.setTitle('ICONS');
d.setContent(`
<style>
.tabs{
width: 600px;
display: block;
margin: 0px auto;
position: relative;
padding: 0px !important;
}
.tabs .tab{
float: left;
display: block;
width: 25%;
}
.tabs .tab>input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs .tab>label {
display: block;
padding: 6px 21px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
position: relative;
color: #FFF;
background: #4A83FD;
}
div#tab-content1 {
color:#000;
}
div#tab-content2 {
color:#000;
}
div#tab-content3 {
color:#000;
}
div#tab-content4 {
color:#000;
}
.tabs .content {
z-index: 0;
overflow: hidden;
width: 599px !important;
padding: 25px;
position: absolute;
top: 26px;
left: 0;
background: #b3b3b3;
color: #DFDFDF;
opacity: 0;
transition: opacity 400ms ease-out;
}
.tabs .tab>label {
display: block;
padding: 6px 21px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
position: relative;
color: #FFF;
background: #444444 !important;
}
.tabs>.tab>[id^="tab"]:checked + label {
top: 0;
background: #b3b3b3 !important;
color: #F5F5F5;
}
.gjs-mdl-dialog {
height: 558px !important;
}
.tabs>.tab>[id^="tab"]:checked + label {
top: 0;
background: #303030;
color: #F5F5F5;
}
.tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
z-index: 1;/* or display: block; */
opacity: 1;
transition: opacity 400ms ease-out;
}
.icon {
display: inline-block;
width: 64px;
height: 64px;
line-height: 64px;
font-size: 24px;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 2px;
border: 1px solid transparent;
}
div#tab-content1 {
max-height: 460px !important;
overflow: scroll;
}
div#tab-content2 {
max-height: 407px;
overflow: scroll;
}
div#tab-content3 {
max-height: 407px;
overflow: scroll;
}
div#tab-content4 {
max-height: 407px;
overflow: scroll;
}
.gjs-mdl-dialog {
max-width: 630px !important;
}
</style>
<ul class="tabs" data-gjs-droppable=".tab">
<li class="tab">
<input type="radio" name="tabs" checked="checked" id="tab1" />
<label for="tab1">Pure</label>
<div id="tab-content1" class="content">
<h4>
<font style="vertical-align: inherit;">Hand Icons</font>
</h4>
<i class="icon fa fa-hand-grab-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-lizard-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-down" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-left" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-right" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-up" aria-hidden="true"></i>
<i class="icon fa fa-hand-paper-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-peace-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-pointer-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-rock-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-scissors-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-spock-o" aria-hidden="true"></i>
<i class="icon fa fa-hand-stop-o" aria-hidden="true"></i>
<i class="icon fa fa-thumbs-down" aria-hidden="true"></i>
<i class="icon fa fa-thumbs-o-down" aria-hidden="true"></i>
<i class="icon fa fa-thumbs-o-up" aria-hidden="true"></i>
<i class="icon fa fa-thumbs-up" aria-hidden="true"></i>
<h4>
<font style="vertical-align: inherit;">Transportation Icons</font>
</h4>
<i class="icon fa fa-ambulance" aria-hidden="true"></i>
<i class="icon fa fa-automobile" aria-hidden="true"></i>
<i class="icon fa fa-bicycle" aria-hidden="true"></i>
<i class="icon fa fa-bus" aria-hidden="true"></i>
<i class="icon fa fa-cab" aria-hidden="true"></i>
<i class="icon fa fa-car" aria-hidden="true"></i>
<i class="icon fa fa-fighter-jet" aria-hidden="true"></i>
<i class="icon fa fa-motorcycle" aria-hidden="true"></i>
<i class="icon fa fa-plane" aria-hidden="true"></i>
<i class="icon fa fa-rocket" aria-hidden="true"></i>
<i class="icon fa fa-ship" aria-hidden="true"></i>
<i class="icon fa fa-space-shuttle" aria-hidden="true"></i>
<i class="icon fa fa-subway" aria-hidden="true"></i>
<i class="icon fa fa-taxi" aria-hidden="true"></i>
<i class="icon fa fa-train" aria-hidden="true"></i>
<i class="icon fa fa-truck" aria-hidden="true"></i>
<i class="icon fa fa-wheelchair" aria-hidden="true"></i>
<i class="icon fa fa-wheelchair-alt" aria-hidden="true"></i>
</li>
</div>
<li class="tab">
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Clean</label>
<div id="tab-content2" class="content">
<h4>
<font style="vertical-align: inherit;">Web Application Icons</font>
</h4>
<i class="icon fa fa-anchor" aria-hidden="true"></i>
<i class="icon fa fa-archive" aria-hidden="true"></i>
<i class="icon fa fa-area-chart" aria-hidden="true"></i>
<i class="icon fa fa-arrows" aria-hidden="true"></i>
<i class="icon fa fa-arrows-h" aria-hidden="true"></i>
<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
<i class="icon fa fa-asterisk" aria-hidden="true"></i>
<i class="icon fa fa-at" aria-hidden="true"></i>
<i class="icon fa fa-sign-in" aria-hidden="true"></i>
<i class="icon fa fa-sign-out" aria-hidden="true"></i>
<i class="icon fa fa-signal" aria-hidden="true"></i>
<i class="icon fa fa-sitemap" aria-hidden="true"></i>
<i class="icon fa fa-sliders" aria-hidden="true"></i>
<i class="icon fa fa-smile-o" aria-hidden="true"></i>
<i class="icon fa fa-soccer-ball-o" aria-hidden="true"></i>
<i class="icon fa fa-sort" aria-hidden="true"></i>
<i class="icon fa fa-sort-alpha-asc" aria-hidden="true"></i>
<i class="icon fa fa-sort-alpha-desc" aria-hidden="true"></i>
<i class="icon fa fa-sort-amount-asc" aria-hidden="true"></i>
<i class="icon fa fa-sort-amount-desc" aria-hidden="true"></i>
<i class="icon fa fa-sort-asc" aria-hidden="true"></i>
<i class="icon fa fa-sort-desc" aria-hidden="true"></i>
<i class="icon fa fa-sort-down" aria-hidden="true"></i>
<i class="icon fa fa-sort-numeric-asc" aria-hidden="true"></i>
<i class="icon fa fa-sort-numeric-desc" aria-hidden="true"></i>
<i class="icon fa fa-sort-up" aria-hidden="true"></i>
<i class="icon fa fa-space-shuttle" aria-hidden="true"></i>
<i class="icon fa fa-spinner" aria-hidden="true"></i>
<i class="icon fa fa-spoon" aria-hidden="true"></i>
<i class="icon fa fa-square" aria-hidden="true"></i>
<i class="icon fa fa-square-o" aria-hidden="true"></i>
<i class="icon fa fa-star" aria-hidden="true"></i>
<i class="icon fa fa-star-half" aria-hidden="true"></i>
<i class="icon fa fa-star-half-empty" aria-hidden="true"></i>
<i class="icon fa fa-star-half-full" aria-hidden="true"></i>
<i class="icon fa fa-star-half-o" aria-hidden="true"></i>
<i class="icon fa fa-star-o" aria-hidden="true"></i>
<i class="icon fa fa-sticky-note" aria-hidden="true"></i>
<i class="icon fa fa-sticky-note-o" aria-hidden="true"></i>
<i class="icon fa fa-street-view" aria-hidden="true"></i>
<i class="icon fa fa-suitcase" aria-hidden="true"></i>
<i class="icon fa fa-sun-o" aria-hidden="true"></i>
<i class="icon fa fa-support" aria-hidden="true"></i>
<i class="icon fa fa-tablet" aria-hidden="true"></i>
<i class="icon fa fa-tachometer" aria-hidden="true"></i>
<i class="icon fa fa-tag" aria-hidden="true"></i>
<i class="icon fa fa-tags" aria-hidden="true"></i>
<i class="icon fa fa-tasks" aria-hidden="true"></i>
<i class="icon fa fa-taxi" aria-hidden="true"></i>
<i class="icon fa fa-television" aria-hidden="true"></i>
<i class="icon fa fa-terminal" aria-hidden="true"></i>
<h4>
<font style="vertical-align: inherit;">Payment Icons</font>
</h4>
<i class="icon fa fa-cc-amex" aria-hidden="true"></i>
<i class="icon fa fa-cc-diners-club" aria-hidden="true"></i>
<i class="icon fa fa-cc-discover" aria-hidden="true"></i>
<i class="icon fa fa-cc-jcb" aria-hidden="true"></i>
<i class="icon fa fa-cc-mastercard" aria-hidden="true"></i>
<i class="icon fa fa-cc-paypal" aria-hidden="true"></i>
<i class="icon fa fa-cc-stripe" aria-hidden="true"></i>
<i class="icon fa fa-cc-visa" aria-hidden="true"></i>
<i class="icon fa fa-credit-card" aria-hidden="true"></i>
<i class="icon fa fa-credit-card-alt" aria-hidden="true"></i>
<i class="icon fa fa-google-wallet" aria-hidden="true"></i>
<i class="icon fa fa-paypal" aria-hidden="true"></i>
</div>
</li>
<li class="tab">
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">Elegant</label>
<div id="tab-content3" class="content">
<h4>
<font style="vertical-align: inherit;">Directions Icons</font>
</h4>
<i class="icon fa fa-angle-double-down" aria-hidden="true"></i>
<i class="icon fa fa-angle-double-left" aria-hidden="true"></i>
<i class="icon fa fa-angle-double-right" aria-hidden="true"></i>
<i class="icon fa fa-angle-double-up" aria-hidden="true"></i>
<i class="icon fa fa-angle-down" aria-hidden="true"></i>
<i class="icon fa fa-angle-left" aria-hidden="true"></i>
<i class="icon fa fa-angle-right" aria-hidden="true"></i>
<i class="icon fa fa-angle-up" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-down" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-left" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-o-down" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-o-left" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-o-right" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-o-up" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-right" aria-hidden="true"></i>
<i class="icon fa fa-arrow-circle-up" aria-hidden="true"></i>
<i class="icon fa fa-arrow-down" aria-hidden="true"></i>
<i class="icon fa fa-arrow-left" aria-hidden="true"></i>
<i class="icon fa fa-arrow-right" aria-hidden="true"></i>
<i class="icon fa fa-arrow-up" aria-hidden="true"></i>
<i class="icon fa fa-arrows" aria-hidden="true"></i>
<i class="icon fa fa-arrows-alt" aria-hidden="true"></i>
<i class="icon fa fa-arrows-h" aria-hidden="true"></i>
<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
<i class="icon fa fa-caret-down" aria-hidden="true"></i>
<i class="icon fa fa-caret-left" aria-hidden="true"></i>
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<i class="icon fa fa-caret-square-o-down" aria-hidden="true"></i>
<i class="icon fa fa-caret-square-o-left" aria-hidden="true"></i>
<i class="icon fa fa-caret-square-o-right" aria-hidden="true"></i>
<i class="icon fa fa-caret-square-o-up" aria-hidden="true"></i>
<i class="icon fa fa-caret-up" aria-hidden="true"></i>
<i class="icon fa fa-chevron-circle-down" aria-hidden="true"></i>
<i class="icon fa fa-chevron-circle-left" aria-hidden="true"></i>
<i class="icon fa fa-chevron-circle-right" aria-hidden="true"></i>
<i class="icon fa fa-chevron-circle-up" aria-hidden="true"></i>
<i class="icon fa fa-chevron-down" aria-hidden="true"></i>
<i class="icon fa fa-chevron-left" aria-hidden="true"></i>
<i class="icon fa fa-chevron-right" aria-hidden="true"></i>
<i class="icon fa fa-chevron-up" aria-hidden="true"></i>
<i class="icon fa fa-exchange" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-down" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-left" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-right" aria-hidden="true"></i>
<i class="icon fa fa-hand-o-up" aria-hidden="true"></i>
<i class="icon fa fa-long-arrow-down" aria-hidden="true"></i>
<i class="icon fa fa-long-arrow-left" aria-hidden="true"></i>
<i class="icon fa fa-long-arrow-right" aria-hidden="true"></i>
<i class="icon fa fa-long-arrow-up" aria-hidden="true"></i>
<i class="icon fa fa-toggle-down" aria-hidden="true"></i>
<i class="icon fa fa-toggle-left" aria-hidden="true"></i>
<i class="icon fa fa-toggle-right" aria-hidden="true"></i>
<i class="icon fa fa-toggle-up" aria-hidden="true"></i>
</div>
</li>
<li class="tab">
<input type="radio" name="tabs" id="tab4" />
<label for="tab4">Minimalist</label>
<div id="tab-content4" class="content">
<h4>
<font style="vertical-align: inherit;">Medical Icons</font>
</h4>
<i class="icon fa fa-ambulance" aria-hidden="true"></i>
<i class="icon fa fa-h-square" aria-hidden="true"></i>
<i class="icon fa fa-heart" aria-hidden="true"></i>
<i class="icon fa fa-heart-o" aria-hidden="true"></i>
<i class="icon fa fa-heartbeat" aria-hidden="true"></i>
<i class="icon fa fa-hospital-o" aria-hidden="true"></i>
<i class="icon fa fa-medkit" aria-hidden="true"></i>
<i class="icon fa fa-plus-square" aria-hidden="true"></i>
<i class="icon fa fa-stethoscope" aria-hidden="true"></i>
<i class="icon fa fa-user-md" aria-hidden="true"></i>
<i class="icon fa fa-wheelchair" aria-hidden="true"></i>
<i class="icon fa fa-wheelchair-alt" aria-hidden="true"></i>
<h4>
<font style="vertical-align: inherit;">Brands Icons</font>
</h4>
<i class="icon fa fa-500px" aria-hidden="true"></i>
<i class="icon fa fa-adn" aria-hidden="true"></i>
<i class="icon fa fa-amazon" aria-hidden="true"></i>
<i class="icon fa fa-android" aria-hidden="true"></i>
<i class="icon fa fa-angellist" aria-hidden="true"></i>
<i class="icon fa fa-apple" aria-hidden="true"></i>
<i class="icon fa fa-bandcamp" aria-hidden="true"></i>
<i class="icon fa fa-behance" aria-hidden="true"></i>
<i class="icon fa fa-behance-square" aria-hidden="true"></i>
<i class="icon fa fa-bitbucket" aria-hidden="true"></i>
<i class="icon fa fa-bitbucket-square" aria-hidden="true"></i>
<i class="icon fa fa-bitcoin" aria-hidden="true"></i>
<i class="icon fa fa-black-tie" aria-hidden="true"></i>
<i class="icon fa fa-bluetooth" aria-hidden="true"></i>
<i class="icon fa fa-bluetooth-b" aria-hidden="true"></i>
<i class="icon fa fa-btc" aria-hidden="true"></i>
<i class="icon fa fa-buysellads" aria-hidden="true"></i>
<i class="icon fa fa-cc-amex" aria-hidden="true"></i>
<i class="icon fa fa-cc-diners-club" aria-hidden="true"></i>
<i class="icon fa fa-cc-discover" aria-hidden="true"></i>
<i class="icon fa fa-cc-jcb" aria-hidden="true"></i>
<i class="icon fa fa-cc-mastercard" aria-hidden="true"></i>
<i class="icon fa fa-cc-paypal" aria-hidden="true"></i>
<i class="icon fa fa-cc-stripe" aria-hidden="true"></i>
<i class="icon fa fa-cc-visa" aria-hidden="true"></i>
<i class="icon fa fa-chrome" aria-hidden="true"></i>
<i class="icon fa fa-codepen" aria-hidden="true"></i>
<i class="icon fa fa-codiepie" aria-hidden="true"></i>
<i class="icon fa fa-connectdevelop" aria-hidden="true"></i>
<i class="icon fa fa-contao" aria-hidden="true"></i>
<i class="icon fa fa-css3" aria-hidden="true"></i>
<i class="icon fa fa-dashcube" aria-hidden="true"></i>
<i class="icon fa fa-delicious" aria-hidden="true"></i>
<i class="icon fa fa-deviantart" aria-hidden="true"></i>
<i class="icon fa fa-digg" aria-hidden="true"></i>
<i class="icon fa fa-dribbble" aria-hidden="true"></i>
<i class="icon fa fa-dropbox" aria-hidden="true"></i>
<i class="icon fa fa-drupal" aria-hidden="true"></i>
<i class="icon fa fa-edge" aria-hidden="true"></i>
<i class="icon fa fa-eercast" aria-hidden="true"></i>
<i class="icon fa fa-empire" aria-hidden="true"></i>
<i class="icon fa fa-envira" aria-hidden="true"></i>
<i class="icon fa fa-etsy" aria-hidden="true"></i>
<i class="icon fa fa-expeditedssl" aria-hidden="true"></i>
<i class="icon fa fa-fa" aria-hidden="true"></i>
<i class="icon fa fa-facebook" aria-hidden="true"></i>
<i class="icon fa fa-facebook-f" aria-hidden="true"></i>
<i class="icon fa fa-facebook-official" aria-hidden="true"></i>
<i class="icon fa fa-facebook-square" aria-hidden="true"></i>
<i class="icon fa fa-firefox" aria-hidden="true"></i>
<i class="icon fa fa-first-order" aria-hidden="true"></i>
<i class="icon fa fa-flickr" aria-hidden="true"></i>
<i class="icon fa fa-font-awesome" aria-hidden="true"></i>
<i class="icon fa fa-fonticons" aria-hidden="true"></i>
<i class="icon fa fa-fort-awesome" aria-hidden="true"></i>
<i class="icon fa fa-forumbee" aria-hidden="true"></i>
<i class="icon fa fa-foursquare" aria-hidden="true"></i>
<i class="icon fa fa-free-code-camp" aria-hidden="true"></i>
<i class="icon fa fa-ge" aria-hidden="true"></i>
<i class="icon fa fa-get-pocket" aria-hidden="true"></i>
<i class="icon fa fa-gg" aria-hidden="true"></i>
<i class="icon fa fa-gg-circle" aria-hidden="true"></i>
<i class="icon fa fa-git" aria-hidden="true"></i>
<i class="icon fa fa-git-square" aria-hidden="true"></i>
<i class="icon fa fa-github" aria-hidden="true"></i>
<i class="icon fa fa-github-alt" aria-hidden="true"></i>
<i class="icon fa fa-github-square" aria-hidden="true"></i>
<i class="icon fa fa-gitlab" aria-hidden="true"></i>
<i class="icon fa fa-gittip" aria-hidden="true"></i>
<i class="icon fa fa-glide" aria-hidden="true"></i>
<i class="icon fa fa-glide-g" aria-hidden="true"></i>
<i class="icon fa fa-google" aria-hidden="true"></i>
<i class="icon fa fa-google-plus" aria-hidden="true"></i>
<i class="icon fa fa-google-plus-circle" aria-hidden="true"></i>
<i class="icon fa fa-google-plus-official" aria-hidden="true"></i>
<i class="icon fa fa-google-plus-square" aria-hidden="true"></i>
<i class="icon fa fa-google-wallet" aria-hidden="true"></i>
<i class="icon fa fa-gratipay" aria-hidden="true"></i>
<i class="icon fa fa-grav" aria-hidden="true"></i>
<i class="icon fa fa-hacker-news" aria-hidden="true"></i>
<i class="icon fa fa-houzz" aria-hidden="true"></i>
<i class="icon fa fa-html5" aria-hidden="true"></i>
<i class="icon fa fa-imdb" aria-hidden="true"></i>
<i class="icon fa fa-instagram" aria-hidden="true"></i>
<i class="icon fa fa-internet-explorer" aria-hidden="true"></i>
<i class="icon fa fa-ioxhost" aria-hidden="true"></i>
<i class="icon fa fa-joomla" aria-hidden="true"></i>
<i class="icon fa fa-jsfiddle" aria-hidden="true"></i>
<i class="icon fa fa-lastfm" aria-hidden="true"></i>
<i class="icon fa fa-lastfm-square" aria-hidden="true"></i>
<i class="icon fa fa-leanpub" aria-hidden="true"></i>
<i class="icon fa fa-linkedin" aria-hidden="true"></i>
<i class="icon fa fa-linkedin-square" aria-hidden="true"></i>
<i class="icon fa fa-linode" aria-hidden="true"></i>
<i class="icon fa fa-linux" aria-hidden="true"></i>
<i class="icon fa fa-maxcdn" aria-hidden="true"></i>
<i class="icon fa fa-meanpath" aria-hidden="true"></i>
<i class="icon fa fa-medium" aria-hidden="true"></i>
<i class="icon fa fa-meetup" aria-hidden="true"></i>
<i class="icon fa fa-mixcloud" aria-hidden="true"></i>
<i class="icon fa fa-modx" aria-hidden="true"></i>
<i class="icon fa fa-odnoklassniki" aria-hidden="true"></i>
<i class="icon fa fa-odnoklassniki-square" aria-hidden="true"></i>
<i class="icon fa fa-opencart" aria-hidden="true"></i>
<i class="icon fa fa-openid" aria-hidden="true"></i>
<i class="icon fa fa-opera" aria-hidden="true"></i>
<i class="icon fa fa-optin-monster" aria-hidden="true"></i>
<i class="icon fa fa-pagelines" aria-hidden="true"></i>
<i class="icon fa fa-paypal" aria-hidden="true"></i>
<i class="icon fa fa-pied-piper" aria-hidden="true"></i>
<i class="icon fa fa-pied-piper-alt" aria-hidden="true"></i>
<i class="icon fa fa-pied-piper-pp" aria-hidden="true"></i>
<i class="icon fa fa-pinterest" aria-hidden="true"></i>
<i class="icon fa fa-pinterest-p" aria-hidden="true"></i>
<i class="icon fa fa-pinterest-square" aria-hidden="true"></i>
<i class="icon fa fa-product-hunt" aria-hidden="true"></i>
<i class="icon fa fa-qq" aria-hidden="true"></i>
<i class="icon fa fa-quora" aria-hidden="true"></i>
<i class="icon fa fa-ra" aria-hidden="true"></i>
<i class="icon fa fa-ravelry" aria-hidden="true"></i>
<i class="icon fa fa-rebel" aria-hidden="true"></i>
<i class="icon fa fa-reddit" aria-hidden="true"></i>
<i class="icon fa fa-reddit-alien" aria-hidden="true"></i>
<i class="icon fa fa-reddit-square" aria-hidden="true"></i>
<i class="icon fa fa-renren" aria-hidden="true"></i>
<i class="icon fa fa-resistance" aria-hidden="true"></i>
<i class="icon fa fa-safari" aria-hidden="true"></i>
<i class="icon fa fa-scribd" aria-hidden="true"></i>
<i class="icon fa fa-sellsy" aria-hidden="true"></i>
<i class="icon fa fa-share-alt" aria-hidden="true"></i>
<i class="icon fa fa-share-alt-square" aria-hidden="true"></i>
<i class="icon fa fa-shirtsinbulk" aria-hidden="true"></i>
<i class="icon fa fa-simplybuilt" aria-hidden="true"></i>
<i class="icon fa fa-skyatlas" aria-hidden="true"></i>
<i class="icon fa fa-skype" aria-hidden="true"></i>
<i class="icon fa fa-slack" aria-hidden="true"></i>
<i class="icon fa fa-slideshare" aria-hidden="true"></i>
<i class="icon fa fa-snapchat" aria-hidden="true"></i>
<i class="icon fa fa-snapchat-ghost" aria-hidden="true"></i>
<i class="icon fa fa-snapchat-square" aria-hidden="true"></i>
<i class="icon fa fa-soundcloud" aria-hidden="true"></i>
<i class="icon fa fa-spotify" aria-hidden="true"></i>
<i class="icon fa fa-stack-exchange" aria-hidden="true"></i>
<i class="icon fa fa-stack-overflow" aria-hidden="true"></i>
<i class="icon fa fa-steam" aria-hidden="true"></i>
<i class="icon fa fa-steam-square" aria-hidden="true"></i>
<i class="icon fa fa-stumbleupon" aria-hidden="true"></i>
<i class="icon fa fa-stumbleupon-circle" aria-hidden="true"></i>
<i class="icon fa fa-superpowers" aria-hidden="true"></i>
<i class="icon fa fa-telegram" aria-hidden="true"></i>
<i class="icon fa fa-tencent-weibo" aria-hidden="true"></i>
<i class="icon fa fa-themeisle" aria-hidden="true"></i>
<i class="icon fa fa-trello" aria-hidden="true"></i>
<i class="icon fa fa-tripadvisor" aria-hidden="true"></i>
<i class="icon fa fa-tumblr" aria-hidden="true"></i>
<i class="icon fa fa-tumblr-square" aria-hidden="true"></i>
<i class="icon fa fa-twitch" aria-hidden="true"></i>
<i class="icon fa fa-twitter" aria-hidden="true"></i
<i class="icon fa fa-twitter-square" aria-hidden="true">
<i class="icon fa fa-usb" aria-hidden="true"></i>
<i class="icon fa fa-viacoin" aria-hidden="true"></i>
<i class="icon fa fa-viadeo" aria-hidden="true"></i>
<i class="icon fa fa-viadeo-square" aria-hidden="true"></i>
<i class="icon fa fa-vimeo" aria-hidden="true"></i>
<i class="icon fa fa-vimeo-square" aria-hidden="true"></i>
<i class="icon fa fa-vine" aria-hidden="true"></i>
<i class="icon fa fa-vk" aria-hidden="true"></i>
<i class="icon fa fa-wechat" aria-hidden="true"></i>
<i class="icon fa fa-weibo" aria-hidden="true"></i>
<i class="icon fa fa-weixin" aria-hidden="true"></i>
<i class="icon fa fa-whatsapp" aria-hidden="true"></i>
<i class="icon fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="icon fa fa-windows" aria-hidden="true"></i>
<i class="icon fa fa-wordpress" aria-hidden="true"></i>
<i class="icon fa fa-wpbeginner" aria-hidden="true"></i>
<i class="icon fa fa-wpexplorer" aria-hidden="true"></i>
<i class="icon fa fa-wpforms" aria-hidden="true"></i>
<i class="icon fa fa-xing" aria-hidden="true"></i>
<i class="icon fa fa-xing-square" aria-hidden="true"></i>
<i class="icon fa fa-y-combinator" aria-hidden="true"></i>
<i class="icon fa fa-y-combinator-square" aria-hidden="true"></i>
<i class="icon fa fa-yahoo" aria-hidden="true"></i>
<i class="icon fa fa-yc" aria-hidden="true"></i>
<i class="icon fa fa-yc-square" aria-hidden="true"></i>
<i class="icon fa fa-yelp" aria-hidden="true"></i>
<i class="icon fa fa-yoast" aria-hidden="true"></i>
<i class="icon fa fa-youtube" aria-hidden="true"></i>
<i class="icon fa fa-youtube-play" aria-hidden="true"></i>
<i class="icon fa fa-youtube-square" aria-hidden="true"></i>
</div>
</li>
</ul>
`);
console.log('the element', this, d);
d.open();
setTimeout(function(){
var classname = window.parent.window.document.getElementsByClassName("icon");
var getIconClass = function() {
var attribute = this.getAttribute("class");
// am.setTarget( null );
alert(attribute);
// document.getElementsByTagName("body")[0].setContent("class", attribute);
//document.innerHTML = '<h1>Test</h1><p>LOLWAT';
editor.getComponents().add('<link rel="stylesheet" href="...">');
d.close();
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', getIconClass, false);
}
}, 100);
},
}
});Answers (1)
lock[bot]• October 8, 20190 reactions
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
3 answersUpdated September 17, 2019
Issue #960
Uncaught SyntaxError: Unexpected end of input
blockManager.add('design', { label: 'design', content: { script: function () { $.ajax({ url: parent.DrupalBasePath + '/api/v1/rnode_operati...
1 answersUpdated September 17, 2019
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
3 answersUpdated May 20, 2020
Issue #1817
Change HTML content while block is render in editor
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this bl...
3 answersUpdated February 22, 2020
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.