Icon inside HTML data-text attribute

Question:

the doubt may be silly but i really don't know how to do it. Is it possible to escape an awesomefonts icon (I already have it installed in the project) inside an HTML attribute, in this case the data-text?

Follow CSS/HTML, thanks to everyone!

.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;   
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
<div class="primary-bg">
  <div class="btn btn1" data-text="Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>

Answer:

Yes it is possible, just do the following:

Sets the source property:

font-family: 'FontAwesome';

In the attribute, place the unicode code referring to the icon in front of the text.

data-text="&#xf0e0 Icone+TextoAqui"

Complete list on Cheatsheet page, remembering code is preceded by &#x .

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");


.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;   
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.btn1 {
  font-family: 'FontAwesome';
}
<div class="primary-bg">
    <div class="btn btn1" data-text="&#xf0e0 Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>

EDIT

To increase the font of the icon only

Defines the properties:

.btn1::after {
    /* Defina a margin para separar o icon do texto */
    margin-left: 20px;
}
.btn1:hover::before {
    content: attr(data-icon);
    font-family: 'FontAwesome';
    font-size: 24px;
}

Create data attribute with the unicode code referring to the icon.

data-icon="&#xf0e0"

Example

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");


.primary-bg{
    width: 237px;
    margin: 5px 5px;
    /* Secondary color */
    background-color: rgb(27, 99, 245);
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display: inline-block;
}
.btn
{
    line-height: 55px;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}
.btn1 {

    color: rgba(255,255,255);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    /* Primary color */
    background-color: rgb(29, 85, 148);
}
.btn1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.btn1 span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: rgba(255,255,255,0.2);
    width: 100%;
}
.btn1:hover > span{
    opacity: 0;
    -webkit-transform: translate(0px,40px);
    transform: translate(0px,40px);
}
.btn1::after{
    /* Defina a margin para separar o icon do texto */
    margin-left: 20px;
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.btn1:hover::after{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.btn1:hover::before {
  content: attr(data-icon);
  font-family: 'FontAwesome';
  font-size: 24px;
}
<div class="primary-bg">
    <div class="btn btn1" data-icon="&#xf0e0" data-text="Icone+TextoAqui"><span>Ícone após o hover</span></div>
</div>
Scroll to Top
AllEscort